<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航班运行交接班全景图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <!-- 使用本地docx库 -->
    <script src="docx.js"></script>
    <script>
        // 确保库正确加载
        window.jsPDF = window.jspdf.jsPDF;
        
        // 检查库是否加载成功
        window.addEventListener('load', function() {
            if (typeof window.jsPDF === 'undefined') {
                console.error('jsPDF库加载失败');
            } else {
                console.log('jsPDF库加载成功');
            }
            
            // 检查docx库是否已经加载
            if (typeof window.docx === 'undefined') {
                console.error('docx库加载失败，将使用备用方案');
                window.docx = null;
            } else {
                console.log('docx库已加载成功');
            }
        });
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#4E5969',
                        'card-header': '#1A365D',
                        'status-normal': '#2DCE89',
                        'status-warning': '#FB9400',
                        'status-danger': '#F5365C',
                        'status-info': '#11CDEF'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
                        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05)'
                    }
                }
            }
        }
    </script>
    <style type="text/css">
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            transform: translateY(-3px);
        }
        
        .card-header {
            background: linear-gradient(to right, #1A365D, #2C5282);
            color: white;
            padding: 14px 20px;
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .editable-field {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            padding: 12px 15px;
            min-height: 100px;
            transition: all 0.2s ease;
            outline: none;
            font-family: 'Inter', 'system-ui', sans-serif;
            font-size: 0.875rem;
            text-align: left;
            line-height: 1.4;
        }
        
        /* 左侧模块文本框专用样式 */
        .lg\:w-1\/3 .editable-field {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
            text-align: left !important;
            line-height: 1.4 !important;
        }
        
        /* 确保左侧模块内的所有文本都使用统一字体 */
        .lg\:w-1\/3 .editable-field * {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
        }
        
        /* 左侧模块内的状态标签字体设置 */
        .lg\:w-1\/3 .status-badge {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.75rem !important;
        }
        
        /* 左侧模块内的时间线字体设置 */
        .lg\:w-1\/3 .timeline-time,
        .lg\:w-1\/3 .timeline-content {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
        }
        
        /* 左侧模块内的飞行项目字体设置 */
        .lg\:w-1\/3 .flight-item {
            font-family: 'Inter', 'system-ui', sans-serif !important;
        }
        
        .lg\:w-1\/3 .flight-item * {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
        }
        
        /* 重点航班文本框专用样式 */
        .operation-card .operation-title:contains("重点航班") + .editable-field,
        .operation-card:has(.operation-title:contains("重点航班")) .editable-field {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
            color: #FB9400 !important;
        }
        
        /* 重点航班模块样式 - 使用更兼容的选择器 */
        .operation-card:nth-child(3) .editable-field {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
            color: #FB9400 !important;
        }
        
        /* 重点航班文本框专用样式 */
        .key-flights-field {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
            font-weight: bold !important;
            color: #FB9400 !important;
        }
        
        .key-flights-field * {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
            font-weight: bold !important;
            color: #FB9400 !important;
        }
        
        /* 特殊保障文本框专用样式 */
        .special-support-field {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
            font-weight: bold !important;
            color: #165DFF !important;
        }
        
        .special-support-field * {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 0.875rem !important;
            font-weight: bold !important;
            color: #165DFF !important;
        }
        
        /* 计划航班量文本框专用样式 */
        .planned-flights-field {
            font-family: 'Inter', 'system-ui', sans-serif !important;
        }
        
        .planned-flights-number {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 1.5rem !important;
        }
        
        .planned-flights-label {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 1.5rem !important;
        }
        
        /* 其他信息标题专用样式 - 与计划航班量标题保持一致 */
        label.block.text-sm.font-medium.text-neutral-dark.mb-2 {
            font-family: 'Inter', 'system-ui', sans-serif !important;
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: #1A365D !important;
        }
        
        /* 深蓝色文本通用样式 */
        .deep-blue-text {
            color: #1A365D !important;
            font-weight: bold !important;
        }
        
        /* 覆盖Tailwind的text-gray-700类 */
        .deep-blue-text .text-gray-700 {
            color: #1A365D !important;
            font-weight: bold !important;
        }
        
        /* 确保所有子元素都使用深蓝色 */
        .deep-blue-text * {
            color: #1A365D !important;
            font-weight: bold !important;
        }
        
        /* 风险及重点关注航班模块的输入框深蓝色样式 */
        .flight-info-value {
            color: #1A365D !important;
            font-size: 14px !important;
            font-weight: bold !important;
        }
        
        .editable-field:focus {
            border-color: #90CDF4;
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
            background: white;
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .status-normal {
            background: rgba(45, 206, 137, 0.15);
            color: #2DCE89;
        }
        
        .status-warning {
            background: rgba(251, 148, 0, 0.15);
            color: #FB9400;
        }
        
        .status-danger {
            background: rgba(245, 54, 92, 0.15);
            color: #F5365C;
        }
        
        .status-info {
            background: rgba(17, 205, 239, 0.15);
            color: #11CDEF;
        }
        

        
        .flight-item {
            border-left: 3px solid #90CDF4;
            padding: 10px 15px;
            margin-bottom: 10px;
            background: #F8FAFC;
            border-radius: 0 6px 6px 0;
            transition: all 0.2s ease;
        }
        
        .flight-item:hover {
            background: #EBF8FF;
            transform: translateX(3px);
        }
        
        .btn {
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
        }
        
        .btn-primary {
            background: linear-gradient(to right, #165DFF, #0E42D2);
            color: white;
        }
        
        .btn-secondary {
            background: linear-gradient(to right, #36CFC9, #20A8A0);
            color: white;
        }
        
        .btn-accent {
            background: linear-gradient(to right, #722ED1, #5A18B9);
            color: white;
        }
        
        .btn-success {
            background: linear-gradient(to right, #2DCE89, #24A46D);
            color: white;
        }
        
        .btn-gray {
            background: #EDF2F7;
            color: #4A5568;
        }
        
        .timeline {
            position: relative;
            padding-left: 25px;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 7px;
            top: 5px;
            height: calc(100% - 10px);
            width: 2px;
            background: #CBD5E0;
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 15px;
        }
        
        .timeline-item::before {
            content: '';
            position: absolute;
            left: -25px;
            top: 5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4299E1;
            border: 2px solid white;
            box-shadow: 0 0 0 2px #4299E1;
        }
        
        .timeline-time {
            font-size: 0.85rem;
            color: #718096;
            margin-bottom: 3px;
        }
        
        .timeline-content {
            background: #F8FAFC;
            padding: 10px 15px;
            border-radius: 6px;
            font-size: 0.95rem;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fadeIn {
            animation: fadeIn 0.5s ease forwards;
        }
        
        .tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            background: #EBF8FF;
            color: #2B6CB0;
            font-size: 0.85rem;
            margin: 2px;
        }
        
        .section-title-icon {
            background: #1A365D;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        
        .flight-card {
            border: 2px solid #F5365C;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 16px;
            background: white;
            box-shadow: 0 2px 8px rgba(245, 54, 92, 0.15);
            position: relative;
        }
        
        .flight-card-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            border-bottom: 1px solid #E2E8F0;
            padding-bottom: 8px;
        }
        
        .flight-number {
            font-weight: 700;
            font-size: 1.2rem;
            color: #F5365C;
            margin-right: 12px;
        }
        
        .flight-route {
            font-weight: 600;
            flex-grow: 1;
        }
        
        .flight-card-body {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 16px;
        }
        
        .flight-info-item {
            margin-bottom: 8px;
        }
        
        .flight-info-label {
            font-weight: 600;
            color: #4A5568;
            font-size: 0.9rem;
            margin-bottom: 4px;
        }
        
        .flight-info-value {
            background: #F8FAFC;
            border-radius: 6px;
            padding: 6px 10px;
            min-height: 36px;
            border: 1px solid #E2E8F0;
        }
        
        .flight-card-footer {
            display: flex;
            justify-content: flex-end;
            margin-top: 12px;
        }
        
        .handover-info {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 24px;
        }
        
        .handover-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }
        
        .handover-item {
            display: flex;
            flex-direction: column;
        }
        
        .handover-label {
            font-size: 0.9rem;
            color: #1A365D;
            margin-bottom: 6px;
            font-weight: 700;
        }
        
        .handover-value {
            background: #F8FAFC;
            border-radius: 6px;
            padding: 10px 14px;
            border: 1px solid #E2E8F0;
            font-weight: 600;
            min-height: 44px;
        }
        
        .date-picker {
            position: relative;
        }
        
        .date-picker input {
            padding-right: 40px;
        }
        
        .date-picker::after {
            content: "\f073";
            font-family: "FontAwesome";
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #718096;
            pointer-events: none;
        }
        
        .editable-title {
            border-bottom: 2px dashed #CBD5E0;
            padding-bottom: 4px;
            display: inline-block;
            min-width: 200px;
            font-weight: 700;
            color: white;
        }
        
        .resource-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 16px;
        }
        
        .resource-title {
            font-weight: 700;
            color: #1A365D;
            margin-bottom: 12px;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }
        
        .resource-title i {
            margin-right: 10px;
            color: #165DFF;
        }
        
        .operation-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            margin-bottom: 16px;
            border-left: 4px solid #165DFF;
        }
        
        .operation-title {
            font-weight: 700;
            color: #1A365D;
            margin-bottom: 12px;
            font-size: 1rem;
        }
        
        .header-blue {
            background: linear-gradient(135deg, #1A365D 0%, #2C5282 100%);
            padding: 20px 0;
            border-radius: 0 0 20px 20px;
            margin-bottom: 30px;
        }
        
        .subtitle {
            color: #1A365D;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 8px;
        }
    </style>
</head>
<body class="font-sans">
    <!-- 蓝色报头 -->
    <div class="header-blue">
        <div class="container mx-auto px-4">
            <header class="text-center">
                <div class="inline-block p-3 bg-white bg-opacity-20 rounded-xl mb-4">
                    <i class="fa fa-plane text-white text-2xl"></i>
                </div>
                <h1 class="text-3xl md:text-4xl font-bold text-white mb-2">航班运行交接班全景图</h1>
                <p class="text-white text-opacity-90 max-w-2xl mx-auto">运行控制中心：全景监控·风险预警·高效决策·运行态势一目了然</p>
            </header>
        </div>
    </div>

    <div class="container mx-auto px-4 pb-8 max-w-7xl">
        <!-- 交接班信息栏 -->
        <div class="handover-info animate-fadeIn">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold text-[#1A365D] flex items-center">
                    <div class="section-title-icon">
                        <i class="fa fa-exchange"></i>
                    </div>
                    交接班信息
                </h2>
                <span class="text-neutral-dark/80">当前时间：<span id="current-time"></span></span>
            </div>
            
            <div class="handover-grid">
                <div class="handover-item">
                    <label class="handover-label">交接班日期</label>
                    <div class="date-picker">
                        <input type="date" class="handover-value" id="handover-date">
                    </div>
                </div>
                
                <div class="handover-item">
                    <label class="handover-label">AOC值班经理</label>
                    <div class="handover-value" contenteditable="true">张伟</div>
                </div>
                
                <div class="handover-item">
                    <label class="handover-label">总值班经理</label>
                    <div class="handover-value" contenteditable="true">李明</div>
                </div>
                
                <div class="handover-item">
                    <label class="handover-label">公司领导值班</label>
                    <div class="handover-value" contenteditable="true">王强</div>
                </div>
            </div>
        </div>

        <!-- 主要内容区 -->
        <div class="flex flex-col lg:flex-row gap-6">
            <!-- 左侧栏目 -->
            <div class="lg:w-1/3 space-y-6">
                <!-- 天气概况 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-cloud mr-2"></i>
                        <span class="editable-title" contenteditable="true">天气概况</span>
                    </div>
                    <div class="card-body">
                        <div class="editable-field deep-blue-text" contenteditable="true" id="weather概况">
                            <div class="space-y-3">
                                <div class="flex items-start">
                                    <span class="font-medium text-gray-700 mr-2" style="min-width: 120px;">桂林:</span>
                                    <div class="flex-1" contenteditable="true"></div>
                                </div>
                                <div class="flex items-start">
                                    <span class="font-medium text-gray-700 mr-2" style="min-width: 120px;">海口:</span>
                                    <div class="flex-1" contenteditable="true"></div>
                                </div>
                                <div class="flex items-start">
                                    <span class="font-medium text-gray-700 mr-2" style="min-width: 120px;">其他主起降机场:</span>
                                    <div class="flex-1" contenteditable="true"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 航行通告 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-bullhorn mr-2"></i>
                        <span class="editable-title" contenteditable="true">航行通告</span>
                    </div>
                    <div class="card-body">
                        <div class="editable-field deep-blue-text" contenteditable="true" id="航行通告">
                            <div class="space-y-3">
                                <div class="flex items-start">
                                    <span class="font-medium text-gray-700 mr-2" style="min-width: 80px;">通告内容:</span>
                                    <div class="flex-1" contenteditable="true"></div>
                                </div>
                                <div class="flex items-start">
                                    <span class="font-medium text-gray-700 mr-2" style="min-width: 80px;">通告影响:</span>
                                    <div class="flex-1" contenteditable="true"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 飞机状态 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-plane mr-2"></i>
                        <span class="editable-title" contenteditable="true">飞机状态</span>
                    </div>
                    <div class="card-body">
                        <div class="editable-field deep-blue-text" contenteditable="true" id="飞机状态">
                        </div>
                    </div>
                </div>

                <!-- 保障资源 - 分为三个卡片 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-cogs mr-2"></i>
                        <span class="editable-title" contenteditable="true">保障资源</span>
                    </div>
                    <div class="card-body space-y-4">
                        <!-- 机组资源卡片 -->
                        <div class="resource-card">
                            <div class="resource-title">
                                <i class="fa fa-users"></i>机组资源
                            </div>
                            <div class="editable-field deep-blue-text" contenteditable="true">
                            </div>
                        </div>
                        
                        <!-- 地面保障卡片 -->
                        <div class="resource-card">
                            <div class="resource-title">
                                <i class="fa fa-truck"></i>地面保障
                            </div>
                            <div class="editable-field deep-blue-text" contenteditable="true">
                            </div>
                        </div>
                        
                        <!-- 其他资源卡片 -->
                        <div class="resource-card">
                            <div class="resource-title">
                                <i class="fa fa-cubes"></i>其他资源
                            </div>
                            <div class="editable-field deep-blue-text" contenteditable="true">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧栏目 -->
            <div class="lg:w-2/3 space-y-6">
                <!-- （一）昨日运行情况 -->
                <div class="card">
                    <div class="card-header">
                        <div class="section-title-icon">
                            <span>一</span>
                        </div>
                        <span class="editable-title" contenteditable="true">昨日运行情况</span>
                    </div>
                    <div class="card-body">
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                            <div class="text-center p-4 bg-blue-50 rounded-lg">
                                <div class="text-2xl font-bold text-blue-700" contenteditable="true">245</div>
                                <div class="text-sm text-blue-600 mt-1" contenteditable="true">执行航班</div>
                            </div>
                            <div class="text-center p-4 bg-orange-50 rounded-lg">
                                <div class="text-2xl font-bold text-orange-700" contenteditable="true">18</div>
                                <div class="text-sm text-orange-600 mt-1" contenteditable="true">不正常班次</div>
                            </div>
                            <div class="text-center p-4 bg-green-50 rounded-lg">
                                <div class="text-2xl font-bold text-green-700" contenteditable="true">92.65%</div>
                                <div class="text-sm text-green-600 mt-1" contenteditable="true">正常率</div>
                            </div>
                            <div class="text-center p-4 bg-purple-50 rounded-lg">
                                <div class="text-2xl font-bold text-purple-700" contenteditable="true">8.7小时</div>
                                <div class="text-sm text-purple-600 mt-1" contenteditable="true">飞机利用率</div>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-neutral-dark mb-2" contenteditable="true">其他信息</label>
                            <div class="editable-field deep-blue-text" contenteditable="true" id="其他信息">
                                不正常信息及事件: 昨日运行正常,对今日运行无影响。
                            </div>
                        </div>
                    </div>
                </div>

                <!-- （二）今日运行态势 -->
                <div class="card">
                    <div class="card-header">
                        <div class="section-title-icon">
                            <span>二</span>
                        </div>
                        <span class="editable-title" contenteditable="true">今日运行态势</span>
                    </div>
                    <div class="card-body">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                            <!-- 计划航班量 -->
                            <div class="operation-card planned-flights-card">
                                <div class="operation-title">计划航班量</div>
                                <div class="text-center p-4 bg-blue-50 rounded-lg planned-flights-field">
                                    <div class="flex items-center justify-center">
                                        <span class="text-2xl font-bold text-blue-700 planned-flights-number" contenteditable="true">256</span>
                                        <span class="text-2xl font-bold text-blue-600 ml-1 planned-flights-label" contenteditable="true">班</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 早出港情况 -->
                            <div class="operation-card">
                                <div class="operation-title">早出港情况</div>
                                <div class="editable-field deep-blue-text" contenteditable="true">
                                </div>
                            </div>
                            
                            <!-- 重点航班 -->
                            <div class="operation-card key-flights-card">
                                <div class="operation-title">重点航班</div>
                                <div class="editable-field key-flights-field" contenteditable="true">
                                </div>
                            </div>
                            
                            <!-- 特殊保障 -->
                            <div class="operation-card special-support-card">
                                <div class="operation-title">特殊保障</div>
                                <div class="editable-field special-support-field" contenteditable="true">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- （三）风险及重点关注航班 -->
                <div class="card">
                    <div class="card-header">
                        <div class="section-title-icon">
                            <span>三</span>
                        </div>
                        <span class="editable-title" contenteditable="true">风险及重点关注航班</span>
                    </div>
                    <div class="card-body">
                        <div id="focus-flights-container">
                            <!-- GT1018 厦门-桂林 -->
                            <div class="flight-card">
                                <div class="flight-card-header">
                                    <div class="flight-number" contenteditable="true">GT1018</div>
                                    <div class="flight-route" contenteditable="true">厦门 → 桂林</div>
                                </div>
                                <div class="flight-card-body">
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">风险</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">管控措施</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">其他</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                </div>
                                <div class="flight-card-footer">
                                    <button class="text-red-600 hover:text-red-800 mr-4 delete-btn">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                    <button class="text-primary hover:text-primary-dark add-info-btn">
                                        <i class="fa fa-plus"></i> 添加信息
                                    </button>
                                </div>
                            </div>
                            
                            <!-- GT1135 海口-临沂 -->
                            <div class="flight-card">
                                <div class="flight-card-header">
                                    <div class="flight-number" contenteditable="true">GT1135</div>
                                    <div class="flight-route" contenteditable="true">海口 → 临沂</div>
                                </div>
                                <div class="flight-card-body">
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">风险</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">管控措施</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">其他</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                </div>
                                <div class="flight-card-footer">
                                    <button class="text-red-600 hover:text-red-800 mr-4 delete-btn">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                    <button class="text-primary hover:text-primary-dark add-info-btn">
                                        <i class="fa fa-plus"></i> 添加信息
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 机场关闭 -->
                            <div class="flight-card">
                                <div class="flight-card-header">
                                    <div class="flight-number" contenteditable="true">GT2046</div>
                                    <div class="flight-route" contenteditable="true">成都 → 拉萨</div>
                                </div>
                                <div class="flight-card-body">
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">风险</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">管控措施</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                    <div class="flight-info-item">
                                        <div class="flight-info-label" contenteditable="true">其他</div>
                                        <div class="flight-info-value" contenteditable="true"></div>
                                    </div>
                                </div>
                                <div class="flight-card-footer">
                                    <button class="text-red-600 hover:text-red-800 mr-4 delete-btn">
                                        <i class="fa fa-trash"></i> 删除
                                    </button>
                                    <button class="text-primary hover:text-primary-dark add-info-btn">
                                        <i class="fa fa-plus"></i> 添加信息
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4 text-center">
                            <button id="add-flight-btn" class="bg-white text-primary border border-primary hover:bg-primary hover:text-white px-4 py-2 rounded-lg transition-all">
                                <i class="fa fa-plus mr-2"></i>添加重点关注航班
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮区 -->
        <div class="mt-10 flex flex-wrap gap-4 justify-center">
            <button class="btn btn-primary" id="submit-handover-btn">
                <i class="fa fa-check"></i>提交交接班全景图
            </button>
            <button class="btn btn-gray" id="reset-form-btn">
                <i class="fa fa-refresh"></i>重置表单
            </button>
            <button class="btn btn-secondary btn-word-export">
                <i class="fa fa-file-word-o"></i>导出为Word
            </button>
            <button class="btn btn-accent btn-image-export">
                <i class="fa fa-image"></i>导出为图片
            </button>
            <button class="btn btn-accent btn-pdf-export">
                <i class="fa fa-file-pdf-o"></i>导出为PDF
            </button>
            <button class="btn btn-success">
                <i class="fa fa-share-alt"></i>共享填报
            </button>
        </div>


    </div>
    
    <script>
        // 更新当前时间
        function updateCurrentTime() {
            const now = new Date();
            const timeStr = now.toLocaleTimeString('zh-CN', { 
                hour: '2-digit', 
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('current-time').textContent = timeStr;
        }
        
        // 每秒钟更新时间
        setInterval(updateCurrentTime, 1000);
        updateCurrentTime();
        
        // 自动设置交接班日期为当前日期
        function setHandoverDate() {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            const currentDate = `${year}-${month}-${day}`;
            
            const handoverDateInput = document.getElementById('handover-date');
            if (handoverDateInput) {
                handoverDateInput.value = currentDate;
                console.log('交接班日期已自动设置为:', currentDate);
            }
        }
        
        // 页面加载时设置交接班日期
        window.addEventListener('load', function() {
            setHandoverDate();
            // 清理过期的缓存数据
            cleanExpiredCache();
            loadDataFromCache();
            // 强制清空飞机状态模块
            document.getElementById('飞机状态').innerHTML = '';
        });
        
        // 数据管理功能
        // 获取当前日期作为缓存键的一部分
        function getCacheKey() {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            const dateString = `${year}-${month}-${day}`;
            return `handover_data_${dateString}`;
        }
        
        // 清理过期的缓存数据（保留最近7天的数据）
        function cleanExpiredCache() {
            try {
                const today = new Date();
                const keysToRemove = [];
                
                // 遍历localStorage中的所有键
                for (let i = 0; i < localStorage.length; i++) {
                    const key = localStorage.key(i);
                    if (key && key.startsWith('handover_data_')) {
                        // 提取日期部分
                        const datePart = key.replace('handover_data_', '');
                        const keyDate = new Date(datePart);
                        
                        // 计算日期差（毫秒）
                        const timeDiff = today.getTime() - keyDate.getTime();
                        const daysDiff = timeDiff / (1000 * 3600 * 24);
                        
                        // 如果超过7天，标记为删除
                        if (daysDiff > 7) {
                            keysToRemove.push(key);
                        }
                    }
                }
                
                // 删除过期的缓存
                keysToRemove.forEach(key => {
                    localStorage.removeItem(key);
                    console.log('删除过期缓存:', key);
                });
                
                if (keysToRemove.length > 0) {
                    console.log(`清理了 ${keysToRemove.length} 个过期缓存文件`);
                }
            } catch (error) {
                console.error('清理过期缓存失败:', error);
            }
        }
        
        // 获取所有可编辑字段的数据
        function collectAllData() {
            const data = {
                handoverInfo: {
                    date: document.getElementById('handover-date')?.value || '',
                    aocManager: document.querySelector('.handover-item:nth-child(2) .handover-value')?.textContent || '',
                    generalManager: document.querySelector('.handover-item:nth-child(3) .handover-value')?.textContent || '',
                    companyLeader: document.querySelector('.handover-item:nth-child(4) .handover-value')?.textContent || ''
                },
                leftPanel: {
                    weather: document.getElementById('weather概况')?.innerHTML || '',
                    notam: document.getElementById('航行通告')?.innerHTML || '',
                    aircraftStatus: document.getElementById('飞机状态')?.innerHTML || '',
                    crewResources: document.querySelector('.resource-card:nth-child(1) .editable-field')?.innerHTML || '',
                    groundSupport: document.querySelector('.resource-card:nth-child(2) .editable-field')?.innerHTML || '',
                    otherResources: document.querySelector('.resource-card:nth-child(3) .editable-field')?.innerHTML || ''
                },
                yesterdayStats: {
                    executedFlights: document.querySelector('.text-2xl.font-bold.text-blue-700')?.textContent || '245',
                    abnormalFlights: document.querySelector('.text-2xl.font-bold.text-orange-700')?.textContent || '18',
                    normalRate: document.querySelector('.text-2xl.font-bold.text-green-700')?.textContent || '92.65%',
                    aircraftUtilization: document.querySelector('.text-2xl.font-bold.text-purple-700')?.textContent || '8.7小时',
                    otherInfo: document.getElementById('其他信息')?.innerHTML || ''
                },
                todayOperations: {
                    plannedFlights: document.querySelector('.planned-flights-number')?.textContent || '256',
                    earlyDeparture: document.querySelector('.operation-card:nth-child(2) .editable-field')?.innerHTML || '',
                    keyFlights: document.querySelector('.key-flights-field')?.innerHTML || '',
                    specialSupport: document.querySelector('.special-support-field')?.innerHTML || ''
                },
                riskFlights: {
                    flights: []
                },
                footer: {
                    currentDuty: document.querySelector('footer span:nth-child(1)')?.textContent || '',
                    handoverTime: document.querySelector('footer span:nth-child(2)')?.textContent || '',
                    systemVersion: document.querySelector('footer span:nth-child(3)')?.textContent || ''
                },
                timestamp: new Date().toISOString()
            };
            
            // 收集风险航班数据
            const flightCards = document.querySelectorAll('.flight-card');
            console.log('找到航班卡片数量:', flightCards.length);
            flightCards.forEach((card, index) => {
                // 只收集当前页面上存在的航班卡片
                if (card && card.parentNode && card.offsetParent !== null) {
                    console.log(`收集航班卡片 ${index}:`, card.querySelector('.flight-number')?.textContent);
                    const flightData = {
                        id: `flight_${index}`,
                        number: card.querySelector('.flight-number')?.textContent || '',
                        route: card.querySelector('.flight-route')?.textContent || '',
                        riskInfo: {
                            modifyRisk: card.querySelector('.flight-info-item:nth-child(1) .flight-info-value')?.textContent || '',
                            controlMeasures: card.querySelector('.flight-info-item:nth-child(2) .flight-info-value')?.textContent || '',
                            other: card.querySelector('.flight-info-item:nth-child(3) .flight-info-value')?.textContent || ''
                        }
                    };
                    data.riskFlights.flights.push(flightData);
                }
            });
            console.log('最终收集到的航班数量:', data.riskFlights.flights.length);
            
            return data;
        }
        
        // 保存数据到缓存
        function saveDataToCache() {
            try {
                console.log('开始保存数据到缓存...');
                const data = collectAllData();
                console.log('收集到的数据:', data);
                const cacheKey = getCacheKey();
                localStorage.setItem(cacheKey, JSON.stringify(data));
                console.log('数据已保存到缓存，当前航班数量:', data.riskFlights.flights.length, '缓存键:', cacheKey);
                // 只有在用户主动点击提交按钮时才显示提示
                if (event && event.target && event.target.id === 'submit-handover-btn') {
                    alert('交接班全景图数据已成功保存！');
                }
            } catch (error) {
                console.error('保存数据失败:', error);
                if (event && event.target && event.target.id === 'submit-handover-btn') {
                    alert('保存数据失败，请重试！');
                }
            }
        }
        
        // 从缓存加载数据
        function loadDataFromCache() {
            try {
                const cacheKey = getCacheKey();
                const cachedData = localStorage.getItem(cacheKey);
                console.log('尝试加载今日缓存数据，缓存键:', cacheKey);
                if (cachedData) {
                    const data = JSON.parse(cachedData);
                    console.log('从缓存加载数据:', data, '缓存键:', cacheKey);
                    applyDataToPage(data);
                } else {
                    console.log('今日缓存中没有数据，使用默认数据，缓存键:', cacheKey);
                }
            } catch (error) {
                console.error('加载缓存数据失败:', error);
            }
        }
        
        // 将数据应用到页面
        function applyDataToPage(data) {
            // 应用交接班信息
            if (data.handoverInfo) {
                if (data.handoverInfo.date) {
                    document.getElementById('handover-date').value = data.handoverInfo.date;
                }
                if (data.handoverInfo.aocManager) {
                    document.querySelector('.handover-item:nth-child(2) .handover-value').textContent = data.handoverInfo.aocManager;
                }
                if (data.handoverInfo.generalManager) {
                    document.querySelector('.handover-item:nth-child(3) .handover-value').textContent = data.handoverInfo.generalManager;
                }
                if (data.handoverInfo.companyLeader) {
                    document.querySelector('.handover-item:nth-child(4) .handover-value').textContent = data.handoverInfo.companyLeader;
                }
            }
            
            // 应用左侧面板数据
            if (data.leftPanel) {
                if (data.leftPanel.weather) {
                    document.getElementById('weather概况').innerHTML = data.leftPanel.weather;
                }
                if (data.leftPanel.notam) {
                    document.getElementById('航行通告').innerHTML = data.leftPanel.notam;
                }
                // 强制清空飞机状态模块
                document.getElementById('飞机状态').innerHTML = '';
                if (data.leftPanel.crewResources) {
                    document.querySelector('.resource-card:nth-child(1) .editable-field').innerHTML = data.leftPanel.crewResources;
                } else {
                    // 如果没有缓存数据，保持为空
                    document.querySelector('.resource-card:nth-child(1) .editable-field').innerHTML = '';
                }
                if (data.leftPanel.groundSupport) {
                    document.querySelector('.resource-card:nth-child(2) .editable-field').innerHTML = data.leftPanel.groundSupport;
                } else {
                    // 如果没有缓存数据，保持为空
                    document.querySelector('.resource-card:nth-child(2) .editable-field').innerHTML = '';
                }
                if (data.leftPanel.otherResources) {
                    document.querySelector('.resource-card:nth-child(3) .editable-field').innerHTML = data.leftPanel.otherResources;
                } else {
                    // 如果没有缓存数据，保持为空
                    document.querySelector('.resource-card:nth-child(3) .editable-field').innerHTML = '';
                }
            } else {
                // 如果没有leftPanel数据，保持为空
                document.getElementById('飞机状态').innerHTML = '';
                document.querySelector('.resource-card:nth-child(1) .editable-field').innerHTML = '';
                document.querySelector('.resource-card:nth-child(2) .editable-field').innerHTML = '';
                document.querySelector('.resource-card:nth-child(3) .editable-field').innerHTML = '';
            }
            
            // 应用昨日统计数据
            if (data.yesterdayStats) {
                if (data.yesterdayStats.executedFlights) {
                    document.querySelector('.text-2xl.font-bold.text-blue-700').textContent = data.yesterdayStats.executedFlights;
                }
                if (data.yesterdayStats.abnormalFlights) {
                    document.querySelector('.text-2xl.font-bold.text-orange-700').textContent = data.yesterdayStats.abnormalFlights;
                }
                if (data.yesterdayStats.normalRate) {
                    document.querySelector('.text-2xl.font-bold.text-green-700').textContent = data.yesterdayStats.normalRate;
                }
                if (data.yesterdayStats.aircraftUtilization) {
                    document.querySelector('.text-2xl.font-bold.text-purple-700').textContent = data.yesterdayStats.aircraftUtilization;
                }
                if (data.yesterdayStats.otherInfo) {
                    document.getElementById('其他信息').innerHTML = data.yesterdayStats.otherInfo;
                }
            }
            
            // 应用今日运行态势数据
            if (data.todayOperations) {
                if (data.todayOperations.plannedFlights) {
                    document.querySelector('.planned-flights-number').textContent = data.todayOperations.plannedFlights;
                }
                if (data.todayOperations.earlyDeparture) {
                    document.querySelector('.operation-card:nth-child(2) .editable-field').innerHTML = data.todayOperations.earlyDeparture;
                }
                if (data.todayOperations.keyFlights) {
                    document.querySelector('.key-flights-field').innerHTML = data.todayOperations.keyFlights;
                }
                if (data.todayOperations.specialSupport) {
                    document.querySelector('.special-support-field').innerHTML = data.todayOperations.specialSupport;
                }
            }
            
            // 应用风险航班数据
            if (data.riskFlights && data.riskFlights.flights) {
                const container = document.getElementById('focus-flights-container');
                const currentFlightCards = document.querySelectorAll('.flight-card');
                console.log('当前页面航班卡片数量:', currentFlightCards.length);
                console.log('缓存中航班数据数量:', data.riskFlights.flights.length);
                
                // 如果当前页面上的航班卡片数量与保存的数据不匹配，重建航班卡片
                if (currentFlightCards.length !== data.riskFlights.flights.length) {
                    console.log('航班卡片数量不匹配，重建航班卡片');
                    console.log('当前页面航班:', Array.from(currentFlightCards).map(card => card.querySelector('.flight-number')?.textContent));
                    console.log('缓存中航班:', data.riskFlights.flights.map(flight => flight.number));
                    
                    // 清空现有航班卡片
                    console.log('清空现有航班卡片');
                    container.innerHTML = '';
                    
                    // 根据缓存数据重建航班卡片
                    console.log('开始重建航班卡片，数量:', data.riskFlights.flights.length);
                    data.riskFlights.flights.forEach((flightData, index) => {
                        console.log(`重建航班卡片 ${index}:`, flightData.number);
                        const newCard = document.createElement('div');
                        newCard.className = 'flight-card';
                        newCard.innerHTML = `
                            <div class="flight-card-header">
                                <div class="flight-number" contenteditable="true">${flightData.number}</div>
                                <div class="flight-route" contenteditable="true">${flightData.route}</div>
                            </div>
                            <div class="flight-card-body">
                                <div class="flight-info-item">
                                    <div class="flight-info-label" contenteditable="true">风险</div>
                                    <div class="flight-info-value" contenteditable="true">${flightData.riskInfo.modifyRisk || ''}</div>
                                </div>
                                <div class="flight-info-item">
                                    <div class="flight-info-label" contenteditable="true">管控措施</div>
                                    <div class="flight-info-value" contenteditable="true">${flightData.riskInfo.controlMeasures || ''}</div>
                                </div>
                                <div class="flight-info-item">
                                    <div class="flight-info-label" contenteditable="true">其他</div>
                                    <div class="flight-info-value" contenteditable="true">${flightData.riskInfo.other || ''}</div>
                                </div>
                            </div>
                            <div class="flight-card-footer">
                                <button class="text-red-600 hover:text-red-800 mr-4 delete-btn">
                                    <i class="fa fa-trash"></i> 删除
                                </button>
                                <button class="text-primary hover:text-primary-dark add-info-btn">
                                    <i class="fa fa-plus"></i> 添加信息
                                </button>
                            </div>
                        `;
                        container.appendChild(newCard);
                    });
                    console.log('航班卡片重建完成');
                } else {
                    // 数量匹配，直接应用数据到现有卡片
                    data.riskFlights.flights.forEach((flightData, index) => {
                        const flightCard = currentFlightCards[index];
                        if (flightCard) {
                            if (flightData.number) {
                                flightCard.querySelector('.flight-number').textContent = flightData.number;
                            }
                            if (flightData.route) {
                                flightCard.querySelector('.flight-route').textContent = flightData.route;
                            }

                            if (flightData.riskInfo) {
                                if (flightData.riskInfo.modifyRisk) {
                                    flightCard.querySelector('.flight-info-item:nth-child(1) .flight-info-value').textContent = flightData.riskInfo.modifyRisk;
                                }
                                if (flightData.riskInfo.controlMeasures) {
                                    flightCard.querySelector('.flight-info-item:nth-child(2) .flight-info-value').textContent = flightData.riskInfo.controlMeasures;
                                }
                                if (flightData.riskInfo.other) {
                                    flightCard.querySelector('.flight-info-item:nth-child(3) .flight-info-value').textContent = flightData.riskInfo.other;
                                }
                            }
                        }
                    });
                }
            }
            
            // 应用底部信息
            if (data.footer) {
                if (data.footer.currentDuty) {
                    document.querySelector('footer span:nth-child(1)').textContent = data.footer.currentDuty;
                }
                if (data.footer.handoverTime) {
                    document.querySelector('footer span:nth-child(2)').textContent = data.footer.handoverTime;
                }
                if (data.footer.systemVersion) {
                    document.querySelector('footer span:nth-child(3)').textContent = data.footer.systemVersion;
                }
            }
            

        }
        
        // 绑定提交按钮事件
        document.addEventListener('DOMContentLoaded', function() {
            const submitBtn = document.getElementById('submit-handover-btn');
            if (submitBtn) {
                submitBtn.addEventListener('click', function() {
                    saveDataToCache();
                });
            }
            
            // 绑定重置按钮事件 - 使用新的重置功能
            const resetBtn = document.getElementById('reset-form-btn');
            if (resetBtn) {
                resetBtn.addEventListener('click', function() {
                    if (confirm('确定要重置所有内容吗？这将清空缓存并恢复所有模块的默认内容。')) {
                        // 1. 清空缓存
                        const cacheKey = getCacheKey();
                        localStorage.removeItem(cacheKey);
                        console.log('已清除今日缓存数据，缓存键:', cacheKey);
                        
                        // 注意：不重置交接班信息模块（按要求保留）
                        
                        // 2. 重置昨日运行情况下的其他信息（只清除其他信息输入框）
                        document.getElementById('其他信息').innerHTML = '';
                        
                        // 3. 重置今日运行态势下的早出港情况
                        document.querySelector('.operation-card:nth-child(2) .editable-field').innerHTML = '';
                        
                        // 4. 重置今日运行态势下的重点航班
                        document.querySelector('.key-flights-field').innerHTML = '';
                        
                        // 5. 重置今日运行态势下的特殊保障
                        document.querySelector('.special-support-field').innerHTML = '';
                        
                        // 6. 重置天气概况（只清除内容，保留标题）
                        document.getElementById('weather概况').innerHTML = '';
                        
                        // 7. 重置航行通告（只清除内容，保留标题）
                        document.getElementById('航行通告').innerHTML = '';
                        
                        // 8. 重置飞机状态（只清除内容，保留标题）
                        document.getElementById('飞机状态').innerHTML = '';
                        
                        // 9. 重置保障资源下的机组资源
                        document.querySelector('.resource-card:nth-child(1) .editable-field').innerHTML = '';
                        
                        // 10. 重置保障资源下的地面保障
                        document.querySelector('.resource-card:nth-child(2) .editable-field').innerHTML = '';
                        
                        // 11. 重置保障资源下的其他资源
                        document.querySelector('.resource-card:nth-child(3) .editable-field').innerHTML = '';
                        
                        // 12. 重置风险及重点关注航班（删除默认的三个航班列表）
                        const focusFlightsContainer = document.getElementById('focus-flights-container');
                        focusFlightsContainer.innerHTML = '';
                        
                        console.log('表单重置完成，指定模块内容已清空');
                        alert('表单重置完成！指定模块内容已清空，缓存已清除。');
                    }
                });
            }
        });
        
        // 导出为PDF功能
        function exportToPDF() {
            console.log('PDF导出按钮被点击');
            
            // 检查库是否加载
            if (typeof window.jsPDF === 'undefined') {
                console.error('jsPDF库未加载');
                alert('PDF库未加载，请刷新页面重试');
                return;
            }
            
            if (typeof html2canvas === 'undefined') {
                console.error('html2canvas库未加载');
                alert('图片转换库未加载，请刷新页面重试');
                return;
            }
            
            console.log('库加载正常，开始PDF导出');
            // 使用图片转PDF方案，保持中文显示
            console.log('使用图片转PDF方案');
            exportToPDFImage();
        }
        
        // 图片转PDF导出功能
        function exportToPDFImage() {
            try {
                // 静默导出，不显示加载提示
                
                // 创建专门用于导出的容器，保持原有布局
                const exportContainer = document.createElement('div');
                exportContainer.style.cssText = `
                    position: absolute; 
                    left: -9999px; 
                    top: -9999px; 
                    width: 800px; 
                    background: white; 
                    padding: 20px;
                    font-family: 'Inter', sans-serif;
                `;
                
                // 添加必要的样式到导出容器，增强颜色对比度
                const style = document.createElement('style');
                style.textContent = `
                    .flex { display: flex !important; }
                    .flex-col { flex-direction: column !important; }
                    .lg\\:flex-row { flex-direction: row !important; }
                    .gap-6 { gap: 1.5rem !important; }
                    .lg\\:w-1\\/3 { width: 33.333333% !important; }
                    .lg\\:w-2\\/3 { width: 66.666667% !important; }
                    .space-y-6 > * + * { margin-top: 1.5rem !important; }
                    .card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        overflow: hidden !important; 
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15) !important; 
                        margin-bottom: 1.5rem !important;
                        border: 1px solid #e2e8f0 !important;
                    }
                    .card-header { 
                        background: linear-gradient(to right, #1A365D, #2C5282) !important; 
                        color: white !important; 
                        padding: 14px 20px !important; 
                        font-weight: 600 !important; 
                        font-size: 1.1rem !important; 
                        display: flex !important; 
                        align-items: center !important;
                        text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
                    }
                    .card-body { padding: 20px !important; }
                    .status-badge { 
                        display: inline-block !important; 
                        padding: 4px 10px !important; 
                        border-radius: 12px !important; 
                        font-size: 0.8rem !important; 
                        font-weight: 500 !important;
                        line-height: 1.5 !important;
                    }
                    
                    .status-normal { 
                        background: rgba(45, 206, 137, 0.25) !important; 
                        color: #2DCE89 !important;
                    }
                    .status-warning { 
                        background: rgba(251, 148, 0, 0.25) !important; 
                        color: #FB9400 !important;
                    }
                    .status-danger { 
                        background: rgba(245, 54, 92, 0.25) !important; 
                        color: #F5365C !important;
                    }
                    .handover-info { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 20px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important; 
                        margin-bottom: 24px !important;
                        border: 1px solid #e2e8f0 !important;
                    }
                    .handover-grid { 
                        display: grid !important; 
                        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; 
                        gap: 16px !important; 
                        margin-top: 16px !important;
                    }
                    .timeline { 
                        position: relative !important; 
                        padding-left: 25px !important;
                    }
                    .timeline::before { 
                        content: '' !important; 
                        position: absolute !important; 
                        left: 7px !important; 
                        top: 5px !important; 
                        height: calc(100% - 10px) !important; 
                        width: 2px !important; 
                        background: #CBD5E0 !important;
                    }
                    .timeline-item { 
                        position: relative !important; 
                        margin-bottom: 15px !important;
                    }
                    .timeline-item::before { 
                        content: '' !important; 
                        position: absolute !important; 
                        left: -25px !important; 
                        top: 5px !important; 
                        width: 12px !important; 
                        height: 12px !important; 
                        border-radius: 50% !important; 
                        background: #4299E1 !important; 
                        border: 2px solid white !important; 
                        box-shadow: 0 0 0 2px #4299E1 !important;
                    }
                    .timeline-time { 
                        font-size: 0.85rem !important; 
                        color: #718096 !important; 
                        margin-bottom: 3px !important;
                    }
                    .timeline-content { 
                        background: #F8FAFC !important; 
                        padding: 10px 15px !important; 
                        border-radius: 6px !important; 
                        font-size: 0.95rem !important;
                    }
                    .flight-item { 
                        border-left: 3px solid #90CDF4 !important; 
                        padding: 10px 15px !important; 
                        margin-bottom: 10px !important; 
                        background: #F8FAFC !important; 
                        border-radius: 0 6px 6px 0 !important;
                    }
                    .flight-card { 
                        border: 2px solid #F5365C !important; 
                        border-radius: 12px !important; 
                        padding: 16px !important; 
                        margin-bottom: 16px !important; 
                        background: white !important; 
                        box-shadow: 0 2px 8px rgba(245, 54, 92, 0.15) !important;
                    }
                    .flight-card-header { 
                        display: flex !important; 
                        align-items: center !important; 
                        margin-bottom: 12px !important; 
                        border-bottom: 1px solid #E2E8F0 !important; 
                        padding-bottom: 8px !important;
                    }
                    .flight-number { 
                        font-weight: 700 !important; 
                        font-size: 1.2rem !important; 
                        color: #F5365C !important; 
                        margin-right: 12px !important;
                    }
                    .flight-route { 
                        font-weight: 600 !important; 
                        flex-grow: 1 !important;
                    }
                    .flight-card-body { 
                        display: grid !important; 
                        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; 
                        gap: 16px !important;
                    }
                    .flight-info-item { margin-bottom: 8px !important; }
                    .flight-info-label { 
                        font-weight: 600 !important; 
                        color: #4A5568 !important; 
                        font-size: 0.9rem !important; 
                        margin-bottom: 4px !important;
                    }
                    .flight-info-value { 
                        background: #F8FAFC !important; 
                        border-radius: 6px !important; 
                        padding: 6px 10px !important; 
                        min-height: 36px !important; 
                        border: 1px solid #E2E8F0 !important;
                    }
                    .operation-card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 16px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 16px !important; 
                        border-left: 4px solid #165DFF !important;
                    }
                    .operation-title { 
                        font-weight: 700 !important; 
                        color: #1A365D !important; 
                        margin-bottom: 12px !important; 
                        font-size: 1rem !important;
                    }
                    .resource-card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 20px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 16px !important;
                    }
                    .resource-title { 
                        font-weight: 700 !important; 
                        color: #1A365D !important; 
                        margin-bottom: 12px !important; 
                        font-size: 1.1rem !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .resource-title i { 
                        margin-right: 10px !important; 
                        color: #165DFF !important;
                    }
                    .header-blue { 
                        background: linear-gradient(135deg, #1A365D 0%, #2C5282 100%) !important; 
                        padding: 20px 0 !important; 
                        border-radius: 0 0 20px 20px !important; 
                        margin-bottom: 30px !important;
                    }
                    .header-blue h1 { 
                        color: white !important; 
                        font-size: 2rem !important; 
                        font-weight: bold !important; 
                        margin-bottom: 0.5rem !important;
                    }
                    .header-blue p { 
                        color: rgba(255, 255, 255, 0.9) !important;
                    }
                    .handover-info { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 20px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 24px !important;
                    }
                    .handover-info h2 { 
                        color: #1A365D !important; 
                        font-size: 1.25rem !important; 
                        font-weight: bold !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .section-title-icon { 
                        background: #1A365D !important; 
                        color: white !important; 
                        width: 32px !important; 
                        height: 32px !important; 
                        border-radius: 8px !important; 
                        display: inline-flex !important; 
                        align-items: center !important; 
                        justify-content: center !important; 
                        margin-right: 10px !important;
                    }
                    .handover-grid { 
                        display: grid !important; 
                        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; 
                        gap: 16px !important; 
                        margin-top: 16px !important;
                    }
                    .handover-item { 
                        display: flex !important; 
                        flex-direction: column !important;
                    }
                    .handover-label { 
                        font-size: 0.9rem !important; 
                        color: #1A365D !important; 
                        margin-bottom: 6px !important; 
                        font-weight: 700 !important;
                    }
                    .handover-value { 
                        background: #F8FAFC !important; 
                        border-radius: 6px !important; 
                        padding: 10px 14px !important; 
                        border: 1px solid #E2E8F0 !important; 
                        font-weight: 600 !important; 
                        min-height: 44px !important;
                    }
                    .date-picker { 
                        position: relative !important;
                    }
                    .date-picker input { 
                        padding-right: 40px !important;
                    }
                    .date-picker::after { 
                        content: "\\f073" !important; 
                        font-family: "FontAwesome" !important; 
                        position: absolute !important; 
                        right: 15px !important; 
                        top: 50% !important; 
                        transform: translateY(-50%) !important; 
                        color: #718096 !important; 
                        pointer-events: none !important;
                    }
                `;
                exportContainer.appendChild(style);
                document.body.appendChild(exportContainer);
                
                // 复制蓝色报头
                const headerBlue = document.querySelector('.header-blue');
                if (headerBlue) {
                    const headerClone = headerBlue.cloneNode(true);
                    exportContainer.appendChild(headerClone);
                }
                
                // 复制交接班信息栏
                const handoverInfo = document.querySelector('.handover-info');
                if (handoverInfo) {
                    const handoverClone = handoverInfo.cloneNode(true);
                    exportContainer.appendChild(handoverClone);
                }
                
                // 复制整个主要内容区域，保持布局结构
                const mainContent = document.querySelector('.flex.flex-col.lg\\:flex-row.gap-6');
                if (mainContent) {
                    const mainContentClone = mainContent.cloneNode(true);
                    
                    // 移除不需要的元素
                    const elementsToRemove = mainContentClone.querySelectorAll('button, .btn, script, style, .flight-card-footer');
                    elementsToRemove.forEach(el => el.remove());
                    
                    exportContainer.appendChild(mainContentClone);
                } else {
                    // 备用方案：只复制卡片内容
                    const cards = document.querySelectorAll('.card');
                    cards.forEach(card => {
                        exportContainer.appendChild(card.cloneNode(true));
                    });
                }
                
                console.log('导出容器创建完成，包含元素数量:', exportContainer.children.length);
                
                console.log('开始生成PDF，元素尺寸:', exportContainer.scrollWidth, 'x', exportContainer.scrollHeight);
                
                // 确保元素可见
                exportContainer.style.cssText = `
                    position: relative !important;
                    visibility: visible !important;
                    display: block !important;
                    width: 1200px !important;
                    height: auto !important;
                    overflow: visible !important;
                    background: white !important;
                    padding: 20px !important;
                `;
                
                // 等待样式生效
                setTimeout(() => {
                    html2canvas(exportContainer, {
                        scale: 1.5, // 平衡清晰度和文件大小
                        useCORS: true,
                        allowTaint: true,
                        backgroundColor: '#ffffff',
                        logging: false,
                        width: exportContainer.scrollWidth,
                        height: exportContainer.scrollHeight,
                        scrollX: 0,
                        scrollY: 0,
                        imageTimeout: 0, // 禁用图片超时
                        removeContainer: true,
                        foreignObjectRendering: false
                    }).then(canvas => {
                        try {
                            console.log('Canvas生成成功，尺寸:', canvas.width, 'x', canvas.height);
                            
                            // 检查canvas是否有内容
                            const ctx = canvas.getContext('2d');
                            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                            const hasContent = imageData.data.some(pixel => pixel !== 0);
                            
                            if (!hasContent) {
                                throw new Error('Canvas内容为空，请检查页面内容');
                            }
                            
                            const imgData = canvas.toDataURL('image/png');
                            console.log('图片数据生成成功，长度:', imgData.length);
                            
                            // 创建PDF，使用最简单可靠的方法
                            const pdf = new window.jsPDF('p', 'mm', 'a4');
                            const imgWidth = 210;
                            const pageHeight = 297;
                            const imgHeight = canvas.height * imgWidth / canvas.width;
                            let heightLeft = imgHeight;
                            let position = 0;
                            
                            console.log('PDF页面设置:', '宽度=', imgWidth, '高度=', imgHeight, '总高度=', heightLeft);
                            
                            // 添加第一页
                            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                            heightLeft -= pageHeight;
                            
                            // 添加后续页面
                            while (heightLeft >= 0) {
                                position = heightLeft - imgHeight;
                                pdf.addPage();
                                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                                heightLeft -= pageHeight;
                            }
                            
                            const fileName = `航班运行交接班全景图_${new Date().toISOString().slice(0, 10)}.pdf`;
                            pdf.save(fileName);
                            
                            console.log('PDF生成成功:', fileName);
                            
                            // 清理临时元素
                            document.body.removeChild(exportContainer);
                            
                            // 静默成功，不显示提示
                            
                        } catch (error) {
                            console.error('PDF生成失败:', error);
                            
                            // 清理临时元素
                            if (document.body.contains(exportContainer)) {
                                document.body.removeChild(exportContainer);
                            }
                            
                            // 静默失败，不显示提示
                        }
                    }).catch(error => {
                        console.error('Canvas生成失败:', error);
                        
                        // 清理临时元素
                        if (document.body.contains(exportContainer)) {
                            document.body.removeChild(exportContainer);
                        }
                        
                        // 静默失败，不显示提示
                    });
                }, 100);
                
            } catch (error) {
                console.error('图片PDF导出失败:', error);
                // 静默失败，不显示提示
            }
        }
        
        // HTML转PDF导出功能（备用方案）
        function exportToPDFHTML() {
            try {
                // 显示加载提示
                const loadingDiv = document.createElement('div');
                loadingDiv.style.cssText = `
                    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                    background: rgba(0,0,0,0.8); color: white; padding: 20px; border-radius: 10px;
                    z-index: 9999; font-size: 16px;
                `;
                loadingDiv.textContent = '正在生成PDF，请稍候...';
                document.body.appendChild(loadingDiv);
                
                // 获取页面内容
                const container = document.querySelector('.container.mx-auto.px-4.pb-8.max-w-7xl');
                if (!container) {
                    throw new Error('未找到主要内容区域');
                }
                
                const content = container.cloneNode(true);
                
                // 移除不需要的元素：按钮区域和底部信息
                const elementsToRemove = content.querySelectorAll('button, .btn, script, style, .flight-card-footer, footer, .mt-10, .flex.flex-wrap.gap-4.justify-center');
                elementsToRemove.forEach(el => el.remove());
                
                // 移除操作按钮区域
                const buttonSection = content.querySelector('.mt-10.flex.flex-wrap.gap-4.justify-center');
                if (buttonSection) {
                    buttonSection.remove();
                }
                
                // 移除底部信息
                const footer = content.querySelector('footer');
                if (footer) {
                    footer.remove();
                }
                
                // 生成HTML内容
                const htmlContent = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>航班运行交接班全景图</title>
                        <style>
                            body { 
                                font-family: 'Inter', 'system-ui', sans-serif; 
                                margin: 20px; 
                                line-height: 1.6;
                                color: #333;
                            }
                            .header { 
                                text-align: center; 
                                margin-bottom: 30px; 
                                border-bottom: 2px solid #1A365D;
                                padding-bottom: 20px;
                            }
                            .header h1 {
                                color: #1A365D;
                                font-size: 24px;
                                margin-bottom: 10px;
                            }
                            .section { 
                                margin-bottom: 20px; 
                                page-break-inside: avoid;
                            }
                            .section-title { 
                                font-size: 18px; 
                                font-weight: bold; 
                                margin-bottom: 10px; 
                                color: #1A365D;
                                border-left: 4px solid #1A365D;
                                padding-left: 10px;
                            }
                            .card {
                                border: 1px solid #ddd;
                                border-radius: 8px;
                                margin: 15px 0;
                                padding: 15px;
                                background: #f9f9f9;
                            }
                            .card-header {
                                background: #1A365D;
                                color: white;
                                padding: 10px 15px;
                                margin: -15px -15px 15px -15px;
                                border-radius: 8px 8px 0 0;
                                font-weight: bold;
                            }
                            .status-badge {
                                background: #e3f2fd;
                                color: #1976d2;
                                padding: 2px 8px;
                                border-radius: 12px;
                                font-size: 12px;
                                margin: 0 2px;
                            }
                            .handover-grid {
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                gap: 15px;
                                margin: 15px 0;
                            }
                            .handover-item {
                                border: 1px solid #e0e0e0;
                                padding: 10px;
                                border-radius: 5px;
                            }
                            .handover-label {
                                font-weight: bold;
                                color: #1A365D;
                                margin-bottom: 5px;
                            }
                            .handover-value {
                                background: #f5f5f5;
                                padding: 5px;
                                border-radius: 3px;
                            }
                            @media print {
                                body { margin: 0; }
                                .card { page-break-inside: avoid; }
                            }
                        </style>
                    </head>
                    <body>
                        <div class="header">
                            <h1>航班运行交接班全景图</h1>
                            <p>生成时间：${new Date().toLocaleString('zh-CN')}</p>
                        </div>
                        ${content.innerHTML}
                    </body>
                    </html>
                `;
                
                // 创建Blob并下载
                const blob = new Blob([htmlContent], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = `航班运行交接班全景图_${new Date().toISOString().slice(0, 10)}.doc`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
                
                // 静默成功，不显示提示
                
            } catch (error) {
                console.error('HTML PDF导出失败:', error);
                // 静默失败，不显示提示
            }
        }
        
        // 备用PDF导出功能（生成文本PDF）
        function exportToPDFText() {
            try {
                // 显示加载提示
                const loadingDiv = document.createElement('div');
                loadingDiv.style.cssText = `
                    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
                    background: rgba(0,0,0,0.8); color: white; padding: 20px; border-radius: 10px;
                    z-index: 9999; font-size: 16px;
                `;
                loadingDiv.textContent = '正在生成PDF，请稍候...';
                document.body.appendChild(loadingDiv);
                
                // 获取页面内容 - 选择主要内容区域
                const container = document.querySelector('.container.mx-auto.px-4.pb-8.max-w-7xl');
                if (!container) {
                    throw new Error('未找到主要内容区域');
                }
                
                const content = container.cloneNode(true);
                
                // 移除不需要的元素：按钮区域和底部信息
                const elementsToRemove = content.querySelectorAll('button, .btn, script, style, .flight-card-footer, footer, .mt-10, .flex.flex-wrap.gap-4.justify-center');
                elementsToRemove.forEach(el => el.remove());
                
                // 移除操作按钮区域
                const buttonSection = content.querySelector('.mt-10.flex.flex-wrap.gap-4.justify-center');
                if (buttonSection) {
                    buttonSection.remove();
                }
                
                // 移除底部信息
                const footer = content.querySelector('footer');
                if (footer) {
                    footer.remove();
                }
                
                // 结构化提取内容
                const sections = [];
                
                // 提取交接班信息
                const handoverInfo = content.querySelector('.handover-info');
                if (handoverInfo) {
                    sections.push('=== 交接班信息 ===');
                    const handoverItems = handoverInfo.querySelectorAll('.handover-item');
                    handoverItems.forEach(item => {
                        const label = item.querySelector('.handover-label')?.textContent?.trim() || '';
                        const value = item.querySelector('.handover-value')?.textContent?.trim() || '';
                        if (label && value) {
                            sections.push(`${label}：${value}`);
                        }
                    });
                    sections.push('');
                }
                
                // 提取所有卡片内容
                const cards = content.querySelectorAll('.card');
                cards.forEach((card, index) => {
                    const title = card.querySelector('.card-header')?.textContent?.trim() || `卡片${index + 1}`;
                    sections.push(`=== ${title} ===`);
                    
                    const cardBody = card.querySelector('.card-body');
                    if (cardBody) {
                        const text = cardBody.textContent?.trim() || '';
                        if (text) {
                            sections.push(text);
                        }
                    }
                    sections.push('');
                });
                
                // 检查是否有内容
                if (sections.length === 0) {
                    throw new Error('页面内容为空');
                }
                
                console.log('提取的内容:', sections);
                
                // 创建PDF
                const pdf = new window.jsPDF('p', 'mm', 'a4');
                
                // 使用内置字体，避免中文乱码
                pdf.setFont('helvetica');
                
                // 添加标题
                pdf.setFontSize(18);
                pdf.setFont('helvetica', 'bold');
                pdf.text('Flight Operation Handover Report', 105, 25, { align: 'center' });
                
                // 添加生成时间
                pdf.setFontSize(10);
                pdf.setFont('helvetica', 'normal');
                pdf.text(`Generated: ${new Date().toLocaleString('en-US')}`, 105, 35, { align: 'center' });
                
                // 添加内容
                pdf.setFontSize(12);
                let y = 50;
                
                for (let section of sections) {
                    if (y > 280) {
                        pdf.addPage();
                        y = 20;
                    }
                    
                    if (section.startsWith('===') && section.endsWith('===')) {
                        // 标题
                        pdf.setFontSize(14);
                        pdf.setFont('helvetica', 'bold');
                        pdf.text(section.replace(/=/g, '').trim(), 10, y);
                        y += 8;
                        pdf.setFontSize(12);
                        pdf.setFont('helvetica', 'normal');
                    } else if (section.trim() === '') {
                        // 空行
                        y += 5;
                    } else {
                        // 普通文本
                        const maxWidth = 190;
                        const words = section.split(' ');
                        let currentLine = '';
                        
                        for (let word of words) {
                            const testLine = currentLine + word + ' ';
                            if (pdf.getTextWidth(testLine) > maxWidth) {
                                pdf.text(currentLine, 10, y);
                                y += 6;
                                currentLine = word + ' ';
                            } else {
                                currentLine = testLine;
                            }
                        }
                        
                        if (currentLine.trim()) {
                            pdf.text(currentLine, 10, y);
                            y += 6;
                        }
                    }
                }
                
                const fileName = `航班运行交接班全景图_${new Date().toISOString().slice(0, 10)}.pdf`;
                pdf.save(fileName);
                
                console.log('PDF生成成功:', fileName);
                // 清理完成
                
            } catch (error) {
                console.error('文本PDF导出失败:', error);
                // 静默失败，不显示提示
            }
        }
        
        // 导出为Word功能
        function exportToWord() {
            console.log('Word导出按钮被点击');
            try {
                // 检查库是否加载
                if (typeof window.docx === 'undefined' || window.docx === null) {
                    console.log('docx库未加载，使用HTML备用方案');
                    exportToWordHTML();
                    return;
                }
                // 静默导出，不显示加载提示
                
                // 获取页面内容 - 使用与PDF导出相同的结构
                const container = document.querySelector('.container.mx-auto.px-4.pb-8.max-w-7xl');
                if (!container) {
                    throw new Error('未找到主要内容区域');
                }
                const content = container.cloneNode(true);
                
                // 移除不需要的元素
                const elementsToRemove = content.querySelectorAll('button, .btn, script, style, .flight-card-footer, footer, .mt-10, .flex.flex-wrap.gap-4.justify-center');
                elementsToRemove.forEach(el => el.remove());
                
                // 移除操作按钮区域
                const buttonSection = content.querySelector('.mt-10.flex.flex-wrap.gap-4.justify-center');
                if (buttonSection) {
                    buttonSection.remove();
                }
                
                // 移除底部信息
                const footer = content.querySelector('footer');
                if (footer) {
                    footer.remove();
                }
                
                // 提取文本内容并构建Word文档结构
                const sections = [];
                
                // 添加标题
                sections.push({
                    text: '航班运行交接班全景图',
                    heading: 'Heading1',
                    spacing: { after: 400 }
                });
                
                // 添加生成时间
                sections.push({
                    text: `生成时间：${new Date().toLocaleString('zh-CN')}`,
                    spacing: { after: 400 }
                });
                
                console.log('开始提取Word内容...');
                console.log('容器元素:', container);
                console.log('内容元素数量:', content.children.length);
                
                // 提取交接班信息
                const handoverInfo = content.querySelector('.handover-info');
                console.log('交接班信息元素:', handoverInfo);
                if (handoverInfo) {
                    sections.push({
                        text: '交接班信息',
                        heading: 'Heading2',
                        spacing: { after: 200 }
                    });
                    
                    const handoverItems = handoverInfo.querySelectorAll('.handover-item');
                    console.log('交接班项目数量:', handoverItems.length);
                    handoverItems.forEach((item, index) => {
                        const label = item.querySelector('.handover-label')?.textContent || '';
                        const value = item.querySelector('.handover-value')?.textContent || '';
                        console.log(`交接班项目 ${index + 1}:`, { label, value });
                        if (label && value) {
                            sections.push({
                                text: `${label}：${value}`,
                                spacing: { after: 100 }
                            });
                        }
                    });
                }
                
                // 提取天气概况
                const weatherSection = content.querySelector('.lg\\:w-1\\/3 .card');
                console.log('天气概况元素:', weatherSection);
                if (weatherSection) {
                    const title = weatherSection.querySelector('.card-header')?.textContent?.trim() || '天气概况';
                    console.log('天气概况标题:', title);
                    sections.push({
                        text: title,
                        heading: 'Heading2',
                        spacing: { after: 200 }
                    });
                    
                    const weatherContent = weatherSection.querySelector('.editable-field')?.textContent || '';
                    console.log('天气概况内容:', weatherContent);
                    if (weatherContent) {
                        sections.push({
                            text: weatherContent,
                            spacing: { after: 300 }
                        });
                    }
                }
                
                // 提取航行通告
                const notamSection = content.querySelector('.lg\\:w-1\\/3 .card:nth-child(2)');
                if (notamSection) {
                    const title = notamSection.querySelector('.card-header')?.textContent?.trim() || '航行通告';
                    sections.push({
                        text: title,
                        heading: 'Heading2',
                        spacing: { after: 200 }
                    });
                    
                    const notamItems = notamSection.querySelectorAll('.timeline-item');
                    notamItems.forEach(item => {
                        const time = item.querySelector('.timeline-time')?.textContent || '';
                        const content = item.querySelector('.timeline-content')?.textContent || '';
                        if (time && content) {
                            sections.push({
                                text: `${time} - ${content}`,
                                spacing: { after: 100 }
                            });
                        }
                    });
                }
                
                // 提取飞机状态
                const aircraftSection = content.querySelector('.lg\\:w-2\\/3 .card');
                if (aircraftSection) {
                    const title = aircraftSection.querySelector('.card-header')?.textContent?.trim() || '飞机状态';
                    sections.push({
                        text: title,
                        heading: 'Heading2',
                        spacing: { after: 200 }
                    });
                    
                    const aircraftItems = aircraftSection.querySelectorAll('.flight-item');
                    aircraftItems.forEach(item => {
                        const aircraftText = item.textContent?.trim() || '';
                        if (aircraftText) {
                            sections.push({
                                text: aircraftText,
                                spacing: { after: 100 }
                            });
                        }
                    });
                }
                
                // 提取保障资源
                const resourceSection = content.querySelector('.lg\\:w-2\\/3 .card:nth-child(2)');
                if (resourceSection) {
                    const title = resourceSection.querySelector('.card-header')?.textContent?.trim() || '保障资源';
                    sections.push({
                        text: title,
                        heading: 'Heading2',
                        spacing: { after: 200 }
                    });
                    
                    const resourceCards = resourceSection.querySelectorAll('.resource-card');
                    resourceCards.forEach(card => {
                        const cardTitle = card.querySelector('.resource-title')?.textContent?.trim() || '';
                        const cardContent = card.querySelector('.editable-field')?.textContent?.trim() || '';
                        
                        if (cardTitle) {
                            sections.push({
                                text: cardTitle,
                                heading: 'Heading3',
                                spacing: { after: 100 }
                            });
                        }
                        
                        if (cardContent) {
                            sections.push({
                                text: cardContent,
                                spacing: { after: 200 }
                            });
                        }
                    });
                }
                

                
                // 使用HTML转Word的方法，保持原有格式
                console.log('使用HTML转Word方法生成文档...');
                
                // 创建格式化的HTML内容
                let htmlContent = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>航班运行交接班全景图</title>
                        <style>
                            body { 
                                font-family: 'Inter', 'system-ui', sans-serif; 
                                margin: 20px; 
                                line-height: 1.6;
                                color: #333;
                            }
                            .header { 
                                text-align: center; 
                                margin-bottom: 30px; 
                                border-bottom: 2px solid #1A365D;
                                padding-bottom: 20px;
                            }
                            .header h1 {
                                color: #1A365D;
                                font-size: 24px;
                                margin-bottom: 10px;
                            }
                            .section { 
                                margin-bottom: 20px; 
                                page-break-inside: avoid;
                            }
                            .section-title { 
                                font-size: 18px; 
                                font-weight: bold; 
                                margin-bottom: 10px; 
                                color: #1A365D;
                                border-left: 4px solid #1A365D;
                                padding-left: 10px;
                            }
                            .handover-grid {
                                display: grid;
                                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                                gap: 10px;
                                margin-top: 10px;
                            }
                            .handover-item {
                                background: #f8f9fa;
                                padding: 8px 12px;
                                border-radius: 4px;
                                border: 1px solid #e9ecef;
                            }
                            .handover-label {
                                font-weight: bold;
                                color: #1A365D;
                                font-size: 14px;
                            }
                            .handover-value {
                                color: #333;
                                margin-top: 4px;
                            }
                            .timeline {
                                margin-left: 20px;
                            }
                            .timeline-item {
                                margin-bottom: 8px;
                                padding-left: 20px;
                                position: relative;
                            }
                            .timeline-item::before {
                                content: "•";
                                position: absolute;
                                left: 0;
                                color: #1A365D;
                                font-weight: bold;
                            }
                            .timeline-time {
                                font-weight: bold;
                                color: #1A365D;
                            }
                            .flight-item {
                                background: #f8f9fa;
                                padding: 8px 12px;
                                margin-bottom: 8px;
                                border-radius: 4px;
                                border-left: 3px solid #1A365D;
                            }
                            .status-badge {
                                display: inline-block;
                                padding: 2px 8px;
                                border-radius: 12px;
                                font-size: 12px;
                                margin-left: 8px;
                            }
                            .status-normal { background: #d4edda; color: #155724; }
                            .status-warning { background: #fff3cd; color: #856404; }
                            .status-danger { background: #f8d7da; color: #721c24; }
                            .resource-card {
                                background: #f8f9fa;
                                padding: 12px;
                                margin-bottom: 10px;
                                border-radius: 4px;
                                border: 1px solid #e9ecef;
                            }
                            .resource-title {
                                font-weight: bold;
                                color: #1A365D;
                                margin-bottom: 8px;
                            }
                            .stats-grid {
                                display: grid;
                                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
                                gap: 15px;
                                margin: 15px 0;
                            }
                            .stat-item {
                                background: #f8f9fa;
                                padding: 12px;
                                border-radius: 6px;
                                text-align: center;
                                border: 1px solid #e9ecef;
                            }
                            .stat-value {
                                font-size: 24px;
                                font-weight: bold;
                                color: #1A365D;
                                margin-bottom: 5px;
                            }
                            .stat-label {
                                font-size: 12px;
                                color: #666;
                            }
                            .operation-card {
                                background: #f8f9fa;
                                padding: 12px;
                                margin-bottom: 10px;
                                border-radius: 6px;
                                border-left: 4px solid #165DFF;
                            }
                            .operation-title {
                                font-weight: bold;
                                color: #1A365D;
                                margin-bottom: 8px;
                                font-size: 14px;
                            }
                            .flight-card {
                                background: #f8f9fa;
                                padding: 12px;
                                margin-bottom: 15px;
                                border-radius: 6px;
                                border: 2px solid #F5365C;
                            }
                            .flight-header {
                                display: flex;
                                align-items: center;
                                margin-bottom: 10px;
                                padding-bottom: 8px;
                                border-bottom: 1px solid #e9ecef;
                            }
                            .flight-number {
                                font-weight: bold;
                                font-size: 16px;
                                color: #F5365C;
                                margin-right: 10px;
                            }
                            .flight-route {
                                font-weight: 600;
                                flex-grow: 1;
                            }
                            .flight-info {
                                display: grid;
                                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                                gap: 8px;
                            }
                            .flight-info-item {
                                display: flex;
                                align-items: center;
                            }
                            .flight-info-label {
                                font-weight: 600;
                                color: #4A5568;
                                font-size: 12px;
                                margin-right: 8px;
                                min-width: 80px;
                            }
                            .flight-info-value {
                                background: white;
                                padding: 4px 8px;
                                border-radius: 4px;
                                border: 1px solid #e9ecef;
                                font-size: 12px;
                            }
                            .other-info {
                                background: #f8f9fa;
                                padding: 10px;
                                border-radius: 4px;
                                margin-top: 10px;
                                border: 1px solid #e9ecef;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="header">
                            <h1>航班运行交接班全景图</h1>
                            <p>生成时间：${new Date().toLocaleString('zh-CN')}</p>
                        </div>
                `;
                
                // 添加交接班信息
                if (handoverInfo) {
                    htmlContent += `
                        <div class="section">
                            <div class="section-title">交接班信息</div>
                            <div class="handover-grid">
                    `;
                    
                    const handoverItems = handoverInfo.querySelectorAll('.handover-item');
                    handoverItems.forEach(item => {
                        const label = item.querySelector('.handover-label')?.textContent || '';
                        const value = item.querySelector('.handover-value')?.textContent || '';
                        if (label && value) {
                            htmlContent += `
                                <div class="handover-item">
                                    <div class="handover-label">${label}</div>
                                    <div class="handover-value">${value}</div>
                                </div>
                            `;
                        }
                    });
                    
                    htmlContent += `
                            </div>
                        </div>
                    `;
                }
                
                // 添加天气概况
                if (weatherSection) {
                    const weatherContent = weatherSection.querySelector('.editable-field')?.textContent || '';
                    if (weatherContent) {
                        htmlContent += `
                            <div class="section">
                                <div class="section-title">天气概况</div>
                                <div>${weatherContent.replace(/\n/g, '<br>')}</div>
                            </div>
                        `;
                    }
                }
                
                // 添加航行通告
                if (notamSection) {
                    const notamItems = notamSection.querySelectorAll('.timeline-item');
                    if (notamItems.length > 0) {
                        htmlContent += `
                            <div class="section">
                                <div class="section-title">航行通告</div>
                                <div class="timeline">
                        `;
                        
                        notamItems.forEach(item => {
                            const time = item.querySelector('.timeline-time')?.textContent || '';
                            const content = item.querySelector('.timeline-content')?.textContent || '';
                            if (time && content) {
                                htmlContent += `
                                    <div class="timeline-item">
                                        <span class="timeline-time">${time}</span> - ${content}
                                    </div>
                                `;
                            }
                        });
                        
                        htmlContent += `
                                </div>
                            </div>
                        `;
                    }
                }
                
                // 添加飞机状态
                if (aircraftSection) {
                    const aircraftItems = aircraftSection.querySelectorAll('.flight-item');
                    if (aircraftItems.length > 0) {
                        htmlContent += `
                            <div class="section">
                                <div class="section-title">飞机状态</div>
                        `;
                        
                        aircraftItems.forEach(item => {
                            const aircraftText = item.textContent?.trim() || '';
                            if (aircraftText) {
                                htmlContent += `
                                    <div class="flight-item">${aircraftText}</div>
                                `;
                            }
                        });
                        
                        htmlContent += `
                            </div>
                        `;
                    }
                }
                
                // 添加保障资源
                if (resourceSection) {
                    const resourceCards = resourceSection.querySelectorAll('.resource-card');
                    if (resourceCards.length > 0) {
                        htmlContent += `
                            <div class="section">
                                <div class="section-title">保障资源</div>
                        `;
                        
                        resourceCards.forEach(card => {
                            const cardTitle = card.querySelector('.resource-title')?.textContent?.trim() || '';
                            const cardContent = card.querySelector('.editable-field')?.textContent?.trim() || '';
                            
                            if (cardTitle || cardContent) {
                                htmlContent += `
                                    <div class="resource-card">
                                        ${cardTitle ? `<div class="resource-title">${cardTitle}</div>` : ''}
                                        ${cardContent ? `<div>${cardContent.replace(/\n/g, '<br>')}</div>` : ''}
                                    </div>
                                `;
                            }
                        });
                        
                        htmlContent += `
                            </div>
                        `;
                    }
                }
                
                // 添加昨日运行情况
                const yesterdaySection = content.querySelectorAll('.card')[4];
                if (yesterdaySection) {
                    const title = yesterdaySection.querySelector('.card-header')?.textContent?.trim() || '昨日运行情况';
                    htmlContent += `
                        <div class="section">
                            <div class="section-title">${title}</div>
                    `;
                    
                    const stats = yesterdaySection.querySelectorAll('.text-2xl');
                    const labels = yesterdaySection.querySelectorAll('.text-sm');
                    
                    if (stats.length > 0) {
                        htmlContent += `<div class="stats-grid">`;
                        for (let i = 0; i < stats.length; i++) {
                            const stat = stats[i]?.textContent || '';
                            const label = labels[i]?.textContent || '';
                            if (stat && label) {
                                htmlContent += `
                                    <div class="stat-item">
                                        <div class="stat-value">${stat}</div>
                                        <div class="stat-label">${label}</div>
                                    </div>
                                `;
                            }
                        }
                        htmlContent += `</div>`;
                    }
                    
                    const otherInfo = yesterdaySection.querySelector('.editable-field')?.textContent || '';
                    if (otherInfo) {
                        htmlContent += `<div class="other-info">${otherInfo.replace(/\n/g, '<br>')}</div>`;
                    }
                    
                    htmlContent += `</div>`;
                }
                
                // 添加今日运行态势
                const todaySection = content.querySelectorAll('.card')[5];
                if (todaySection) {
                    const title = todaySection.querySelector('.card-header')?.textContent?.trim() || '今日运行态势';
                    htmlContent += `
                        <div class="section">
                            <div class="section-title">${title}</div>
                    `;
                    
                    const operationCards = todaySection.querySelectorAll('.operation-card');
                    operationCards.forEach(card => {
                        const cardTitle = card.querySelector('.operation-title')?.textContent?.trim() || '';
                        const cardContent = card.querySelector('.editable-field')?.textContent?.trim() || '';
                        
                        if (cardTitle || cardContent) {
                            htmlContent += `
                                <div class="operation-card">
                                    ${cardTitle ? `<div class="operation-title">${cardTitle}</div>` : ''}
                                    ${cardContent ? `<div>${cardContent.replace(/\n/g, '<br>')}</div>` : ''}
                                </div>
                            `;
                        }
                    });
                    
                    htmlContent += `</div>`;
                }
                
                // 添加风险及重点关注航班
                const riskSection = content.querySelectorAll('.card')[6];
                if (riskSection) {
                    const title = riskSection.querySelector('.card-header')?.textContent?.trim() || '风险及重点关注航班';
                    htmlContent += `
                        <div class="section">
                            <div class="section-title">${title}</div>
                    `;
                    
                    const flightCards = riskSection.querySelectorAll('.flight-card');
                    flightCards.forEach(card => {
                        const flightNumber = card.querySelector('.flight-number')?.textContent?.trim() || '';
                        const flightRoute = card.querySelector('.flight-route')?.textContent?.trim() || '';
                        
                        if (flightNumber && flightRoute) {
                            htmlContent += `
                                <div class="flight-card">
                                    <div class="flight-header">
                                        <span class="flight-number">${flightNumber}</span>
                                        <span class="flight-route">${flightRoute}</span>
                                    </div>
                            `;
                            
                            const infoItems = card.querySelectorAll('.flight-info-item');
                            if (infoItems.length > 0) {
                                htmlContent += `<div class="flight-info">`;
                                infoItems.forEach(item => {
                                    const label = item.querySelector('.flight-info-label')?.textContent?.trim() || '';
                                    const value = item.querySelector('.flight-info-value')?.textContent?.trim() || '';
                                    if (label && value) {
                                        htmlContent += `
                                            <div class="flight-info-item">
                                                <span class="flight-info-label">${label}:</span>
                                                <span class="flight-info-value">${value}</span>
                                            </div>
                                        `;
                                    }
                                });
                                htmlContent += `</div>`;
                            }
                            
                            htmlContent += `</div>`;
                        }
                    });
                    
                    htmlContent += `</div>`;
                }
                
                htmlContent += `
                    </body>
                    </html>
                `;
                
                // 生成并下载Word文档
                const blob = new Blob([htmlContent], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = `航班运行交接班全景图_${new Date().toISOString().slice(0, 10)}.doc`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
                
                // 清理完成
                
                // 静默成功，不显示提示
                
            } catch (error) {
                console.error('Word导出失败:', error);
                // 静默失败，不显示提示
            }
        }
        
        // 备用Word导出功能（生成HTML文件）
        function exportToWordHTML() {
            try {
                // 静默导出，不显示加载提示
                
                // 创建专门用于导出的容器，保持原有布局
                const exportContainer = document.createElement('div');
                exportContainer.style.cssText = `
                    position: absolute; 
                    left: -9999px; 
                    top: -9999px; 
                    width: 1200px; 
                    background: white; 
                    padding: 20px;
                    font-family: 'Inter', 'system-ui', sans-serif;
                `;
                
                // 添加必要的样式到导出容器（与PDF导出保持一致）
                const style = document.createElement('style');
                style.textContent = `
                    .flex { display: flex !important; }
                    .flex-col { flex-direction: column !important; }
                    .lg\\:flex-row { flex-direction: row !important; }
                    .gap-6 { gap: 1.5rem !important; }
                    .lg\\:w-1\\/3 { width: 33.333333% !important; }
                    .lg\\:w-2\\/3 { width: 66.666667% !important; }
                    .space-y-6 > * + * { margin-top: 1.5rem !important; }
                    .card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        overflow: hidden !important; 
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 1.5rem !important;
                    }
                    .card-header { 
                        background: linear-gradient(to right, #1A365D, #2C5282) !important; 
                        color: white !important; 
                        padding: 14px 20px !important; 
                        font-weight: 600 !important; 
                        font-size: 1.1rem !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .card-body { padding: 20px !important; }
                    .status-badge { 
                        display: inline-block !important; 
                        padding: 4px 10px !important; 
                        border-radius: 12px !important; 
                        font-size: 0.8rem !important; 
                        font-weight: 500 !important;
                        line-height: 1.5 !important;
                    }
                    
                    /* 风险标签基础样式 */
                    .risk-select, .risk-high, .risk-medium, .risk-low {
                        display: inline-block !important;
                        padding: 4px 8px !important;
                        border-radius: 6px !important;
                        font-size: 0.8rem !important;
                        font-weight: 500 !important;
                        line-height: 1.5 !important;
                        text-align: center !important;
                    }
                    .status-normal { 
                        background: rgba(45, 206, 137, 0.15) !important; 
                        color: #2DCE89 !important;
                    }
                    .status-warning { 
                        background: rgba(255, 193, 7, 0.2) !important; 
                        color: #D97706 !important;
                    }
                    .status-danger { 
                        background: rgba(245, 54, 92, 0.15) !important; 
                        color: #F5365C !important;
                    }
                    .handover-info { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 20px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 24px !important;
                    }
                    .handover-grid { 
                        display: grid !important; 
                        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; 
                        gap: 16px !important; 
                        margin-top: 16px !important;
                    }
                    .timeline { 
                        position: relative !important; 
                        padding-left: 25px !important;
                    }
                    .timeline::before { 
                        content: '' !important; 
                        position: absolute !important; 
                        left: 7px !important; 
                        top: 5px !important; 
                        height: calc(100% - 10px) !important; 
                        width: 2px !important; 
                        background: #CBD5E0 !important;
                    }
                    .timeline-item { 
                        position: relative !important; 
                        margin-bottom: 15px !important;
                    }
                    .timeline-item::before { 
                        content: '' !important; 
                        position: absolute !important; 
                        left: -25px !important; 
                        top: 5px !important; 
                        width: 12px !important; 
                        height: 12px !important; 
                        border-radius: 50% !important; 
                        background: #4299E1 !important; 
                        border: 2px solid white !important; 
                        box-shadow: 0 0 0 2px #4299E1 !important;
                    }
                    .timeline-time { 
                        font-size: 0.85rem !important; 
                        color: #718096 !important; 
                        margin-bottom: 3px !important;
                    }
                    .timeline-content { 
                        background: #F8FAFC !important; 
                        padding: 10px 15px !important; 
                        border-radius: 6px !important; 
                        font-size: 0.95rem !important;
                    }
                    .flight-item { 
                        border-left: 3px solid #90CDF4 !important; 
                        padding: 10px 15px !important; 
                        margin-bottom: 10px !important; 
                        background: #F8FAFC !important; 
                        border-radius: 0 6px 6px 0 !important;
                    }
                    .flight-card { 
                        border: 2px solid #F5365C !important; 
                        border-radius: 12px !important; 
                        padding: 16px !important; 
                        margin-bottom: 16px !important; 
                        background: white !important; 
                        box-shadow: 0 2px 8px rgba(245, 54, 92, 0.15) !important;
                    }
                    .flight-card-header { 
                        display: flex !important; 
                        align-items: center !important; 
                        margin-bottom: 12px !important; 
                        border-bottom: 1px solid #E2E8F0 !important; 
                        padding-bottom: 8px !important;
                    }
                    .flight-number { 
                        font-weight: 700 !important; 
                        font-size: 1.2rem !important; 
                        color: #F5365C !important; 
                        margin-right: 12px !important;
                    }
                    .flight-route { 
                        font-weight: 600 !important; 
                        flex-grow: 1 !important;
                    }
                    .flight-card-body { 
                        display: grid !important; 
                        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; 
                        gap: 16px !important;
                    }
                    .flight-info-item { margin-bottom: 8px !important; }
                    .flight-info-label { 
                        font-weight: 600 !important; 
                        color: #4A5568 !important; 
                        font-size: 0.9rem !important; 
                        margin-bottom: 4px !important;
                    }
                    .flight-info-value { 
                        background: #F8FAFC !important; 
                        border-radius: 6px !important; 
                        padding: 6px 10px !important; 
                        min-height: 36px !important; 
                        border: 1px solid #E2E8F0 !important;
                    }
                    .operation-card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 16px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 16px !important; 
                        border-left: 4px solid #165DFF !important;
                    }
                    .operation-title { 
                        font-weight: 700 !important; 
                        color: #1A365D !important; 
                        margin-bottom: 12px !important; 
                        font-size: 1rem !important;
                    }
                    .resource-card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 20px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 16px !important;
                    }
                    .resource-title { 
                        font-weight: 700 !important; 
                        color: #1A365D !important; 
                        margin-bottom: 12px !important; 
                        font-size: 1.1rem !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .resource-title i { 
                        margin-right: 10px !important; 
                        color: #165DFF !important;
                    }
                    .header-blue { 
                        background: linear-gradient(135deg, #1A365D 0%, #2C5282 100%) !important; 
                        padding: 20px 0 !important; 
                        border-radius: 0 0 20px 20px !important; 
                        margin-bottom: 30px !important; 
                        text-align: center !important;
                    }
                    .header-blue h1 { 
                        color: white !important; 
                        font-size: 2rem !important; 
                        font-weight: bold !important; 
                        margin-bottom: 0.5rem !important;
                    }
                    .header-blue p { 
                        color: rgba(255, 255, 255, 0.9) !important;
                    }
                    .handover-info h2 { 
                        color: #1A365D !important; 
                        font-size: 1.25rem !important; 
                        font-weight: bold !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .section-title-icon { 
                        background: #1A365D !important; 
                        color: white !important; 
                        width: 32px !important; 
                        height: 32px !important; 
                        border-radius: 8px !important; 
                        display: inline-flex !important; 
                        align-items: center !important; 
                        justify-content: center !important; 
                        margin-right: 10px !important;
                    }
                    .handover-item { 
                        display: flex !important; 
                        flex-direction: column !important;
                    }
                    .handover-label { 
                        font-size: 0.9rem !important; 
                        color: #1A365D !important; 
                        margin-bottom: 6px !important; 
                        font-weight: 700 !important;
                    }
                    .handover-value { 
                        background: #F8FAFC !important; 
                        border-radius: 6px !important; 
                        padding: 10px 14px !important; 
                        border: 1px solid #E2E8F0 !important; 
                        font-weight: 600 !important; 
                        min-height: 44px !important;
                    }
                `;
                exportContainer.appendChild(style);
                document.body.appendChild(exportContainer);
                
                // 复制蓝色报头
                const headerBlue = document.querySelector('.header-blue');
                if (headerBlue) {
                    const headerClone = headerBlue.cloneNode(true);
                    exportContainer.appendChild(headerClone);
                }
                
                // 复制交接班信息栏
                const handoverInfo = document.querySelector('.handover-info');
                if (handoverInfo) {
                    const handoverClone = handoverInfo.cloneNode(true);
                    exportContainer.appendChild(handoverClone);
                }
                
                // 复制整个主要内容区域，保持布局结构
                const mainContent = document.querySelector('.flex.flex-col.lg\\:flex-row.gap-6');
                if (mainContent) {
                    const mainContentClone = mainContent.cloneNode(true);
                    
                    // 移除不需要的元素
                    const elementsToRemove = mainContentClone.querySelectorAll('button, .btn, script, style, .flight-card-footer');
                    elementsToRemove.forEach(el => el.remove());
                    
                    exportContainer.appendChild(mainContentClone);
                }
                
                console.log('Word导出容器创建完成，包含元素数量:', exportContainer.children.length);
                
                // 生成HTML内容
                const htmlContent = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>航班运行交接班全景图</title>
                        <style>
                            body { 
                                font-family: 'Inter', 'system-ui', sans-serif; 
                                margin: 20px; 
                                line-height: 1.6;
                                color: #333;
                            }
                        </style>
                    </head>
                    <body>
                        ${exportContainer.innerHTML}
                    </body>
                    </html>
                `;
                
                // 创建下载链接
                const blob = new Blob([htmlContent], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = `航班运行交接班全景图_${new Date().toISOString().slice(0, 10)}.doc`;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                URL.revokeObjectURL(url);
                
                // 清理临时元素
                document.body.removeChild(exportContainer);
                
            } catch (error) {
                console.error('HTML Word导出失败:', error);
                // 静默失败，不显示提示
            }
        }
        
        // 绑定导出按钮事件
        document.addEventListener('DOMContentLoaded', function() {
            // 绑定PDF导出按钮
            const pdfButton = document.querySelector('.btn-pdf-export');
            if (pdfButton) {
                pdfButton.addEventListener('click', exportToPDF);
            }
            
            // 绑定Word导出按钮
            const wordButton = document.querySelector('.btn-word-export');
            if (wordButton) {
                wordButton.addEventListener('click', exportToWord);
            }
            
            // 绑定图片导出按钮
            const imageButton = document.querySelector('.btn-image-export');
            if (imageButton) {
                imageButton.addEventListener('click', exportToImage);
            }
            
            // 初始化时保存原始内容
            document.querySelectorAll('[contenteditable="true"]').forEach(el => {
                el.dataset.original = el.textContent;
            });
            
            // 使用事件委托处理删除功能
            document.addEventListener('click', function(event) {
                console.log('点击事件:', event.target);
                if (event.target.closest('.delete-btn')) {
                    console.log('删除按钮被点击');
                    const card = event.target.closest('.flight-card');
                    if (card) {
                        console.log('删除航班卡片:', card.querySelector('.flight-number')?.textContent);
                        // 真正从DOM中移除元素
                        card.remove();
                        // 删除航班卡片后自动保存数据
                        setTimeout(() => {
                            console.log('自动保存删除后的数据');
                            saveDataToCache();
                        }, 100);
                    }
                }
            });
            
            // 为已有卡片添加信息功能
            document.querySelectorAll('.flight-card-footer .add-info-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const cardBody = this.closest('.flight-card').querySelector('.flight-card-body');
                    const newItem = document.createElement('div');
                    newItem.className = 'flight-info-item';
                    newItem.innerHTML = `
                        <div class="flight-info-label" contenteditable="true">新标签</div>
                        <div class="flight-info-value" contenteditable="true">新内容</div>
                    `;
                    cardBody.appendChild(newItem);
                });
            });
        });
        
        // 添加航班卡片功能
        document.getElementById('add-flight-btn').addEventListener('click', function() {
            const container = document.getElementById('focus-flights-container');
            const newCard = document.createElement('div');
            newCard.className = 'flight-card';
            newCard.innerHTML = `
                <div class="flight-card-header">
                    <div class="flight-number" contenteditable="true">GTXXXX</div>
                    <div class="flight-route" contenteditable="true">出发地 → 目的地</div>
                </div>
                <div class="flight-card-body">
                    <div class="flight-info-item">
                        <div class="flight-info-label" contenteditable="true">风险</div>
                        <div class="flight-info-value" contenteditable="true"></div>
                    </div>
                    <div class="flight-info-item">
                        <div class="flight-info-label" contenteditable="true">管控措施</div>
                        <div class="flight-info-value" contenteditable="true"></div>
                    </div>
                    <div class="flight-info-item">
                        <div class="flight-info-label" contenteditable="true">其他</div>
                        <div class="flight-info-value" contenteditable="true"></div>
                    </div>
                </div>
                <div class="flight-card-footer">
                    <button class="text-red-600 hover:text-red-800 mr-4 delete-btn">
                        <i class="fa fa-trash"></i> 删除
                    </button>
                    <button class="text-primary hover:text-primary-dark add-info-btn">
                        <i class="fa fa-plus"></i> 添加信息
                    </button>
                </div>
            `;
            
            container.appendChild(newCard);
            

            
            // 删除功能由事件委托处理，无需单独绑定
            
            // 添加信息功能
            newCard.querySelector('.add-info-btn').addEventListener('click', function() {
                const cardBody = newCard.querySelector('.flight-card-body');
                const newItem = document.createElement('div');
                newItem.className = 'flight-info-item';
                newItem.innerHTML = `
                    <div class="flight-info-label" contenteditable="true">新标签</div>
                    <div class="flight-info-value" contenteditable="true">新内容</div>
                `;
                cardBody.appendChild(newItem);
            });
        });
        
        // 导出为图片功能
        function exportToImage() {
            console.log('图片导出按钮被点击');
            try {
                // 静默导出，不显示加载提示
                
                // 创建专门用于导出的容器，保持原有布局
                const exportContainer = document.createElement('div');
                exportContainer.style.cssText = `
                    position: absolute; 
                    left: -9999px; 
                    top: -9999px; 
                    width: 1200px; 
                    background: white; 
                    padding: 20px;
                    font-family: 'Inter', sans-serif;
                `;
                
                // 添加必要的样式到导出容器
                const style = document.createElement('style');
                style.textContent = `
                    .flex { display: flex !important; }
                    .flex-col { flex-direction: column !important; }
                    .lg\\:flex-row { flex-direction: row !important; }
                    .gap-6 { gap: 1.5rem !important; }
                    .lg\\:w-1\\/3 { width: 33.333333% !important; }
                    .lg\\:w-2\\/3 { width: 66.666667% !important; }
                    .space-y-6 > * + * { margin-top: 1.5rem !important; }
                    .card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        overflow: hidden !important; 
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 1.5rem !important;
                    }
                    .card-header { 
                        background: linear-gradient(to right, #1A365D, #2C5282) !important; 
                        color: white !important; 
                        padding: 14px 20px !important; 
                        font-weight: 600 !important; 
                        font-size: 1.1rem !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .card-body { padding: 20px !important; }
                    .status-badge { 
                        display: inline-block !important; 
                        padding: 4px 10px !important; 
                        border-radius: 12px !important; 
                        font-size: 0.8rem !important; 
                        font-weight: 500 !important;
                        line-height: 1.5 !important;
                    }
                    
                    /* 风险标签基础样式 */
                    .risk-select, .risk-high, .risk-medium, .risk-low {
                        display: inline-block !important;
                        padding: 4px 8px !important;
                        border-radius: 6px !important;
                        font-size: 0.8rem !important;
                        font-weight: 500 !important;
                        line-height: 1.5 !important;
                        text-align: center !important;
                    }
                    .status-normal { 
                        background: rgba(45, 206, 137, 0.15) !important; 
                        color: #2DCE89 !important;
                    }
                    .status-warning { 
                        background: rgba(255, 193, 7, 0.2) !important; 
                        color: #D97706 !important;
                    }
                    .status-danger { 
                        background: rgba(245, 54, 92, 0.15) !important; 
                        color: #F5365C !important;
                    }
                    .handover-info { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 20px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 24px !important;
                    }
                    .handover-grid { 
                        display: grid !important; 
                        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; 
                        gap: 16px !important; 
                        margin-top: 16px !important;
                    }
                    .timeline { 
                        position: relative !important; 
                        padding-left: 25px !important;
                    }
                    .timeline::before { 
                        content: '' !important; 
                        position: absolute !important; 
                        left: 7px !important; 
                        top: 5px !important; 
                        height: calc(100% - 10px) !important; 
                        width: 2px !important; 
                        background: #CBD5E0 !important;
                    }
                    .timeline-item { 
                        position: relative !important; 
                        margin-bottom: 15px !important;
                    }
                    .timeline-item::before { 
                        content: '' !important; 
                        position: absolute !important; 
                        left: -25px !important; 
                        top: 5px !important; 
                        width: 12px !important; 
                        height: 12px !important; 
                        border-radius: 50% !important; 
                        background: #4299E1 !important; 
                        border: 2px solid white !important; 
                        box-shadow: 0 0 0 2px #4299E1 !important;
                    }
                    .timeline-time { 
                        font-size: 0.85rem !important; 
                        color: #718096 !important; 
                        margin-bottom: 3px !important;
                    }
                    .timeline-content { 
                        background: #F8FAFC !important; 
                        padding: 10px 15px !important; 
                        border-radius: 6px !important; 
                        font-size: 0.95rem !important;
                    }
                    .flight-item { 
                        border-left: 3px solid #90CDF4 !important; 
                        padding: 10px 15px !important; 
                        margin-bottom: 10px !important; 
                        background: #F8FAFC !important; 
                        border-radius: 0 6px 6px 0 !important;
                    }
                    .flight-card { 
                        border: 2px solid #F5365C !important; 
                        border-radius: 12px !important; 
                        padding: 16px !important; 
                        margin-bottom: 16px !important; 
                        background: white !important; 
                        box-shadow: 0 2px 8px rgba(245, 54, 92, 0.15) !important;
                    }
                    .flight-card-header { 
                        display: flex !important; 
                        align-items: center !important; 
                        margin-bottom: 12px !important; 
                        border-bottom: 1px solid #E2E8F0 !important; 
                        padding-bottom: 8px !important;
                    }
                    .flight-number { 
                        font-weight: 700 !important; 
                        font-size: 1.2rem !important; 
                        color: #F5365C !important; 
                        margin-right: 12px !important;
                    }
                    .flight-route { 
                        font-weight: 600 !important; 
                        flex-grow: 1 !important;
                    }
                    .flight-card-body { 
                        display: grid !important; 
                        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; 
                        gap: 16px !important;
                    }
                    .flight-info-item { margin-bottom: 8px !important; }
                    .flight-info-label { 
                        font-weight: 600 !important; 
                        color: #4A5568 !important; 
                        font-size: 0.9rem !important; 
                        margin-bottom: 4px !important;
                    }
                    .flight-info-value { 
                        background: #F8FAFC !important; 
                        border-radius: 6px !important; 
                        padding: 6px 10px !important; 
                        min-height: 36px !important; 
                        border: 1px solid #E2E8F0 !important;
                    }
                    .operation-card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 16px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 16px !important; 
                        border-left: 4px solid #165DFF !important;
                    }
                    .operation-title { 
                        font-weight: 700 !important; 
                        color: #1A365D !important; 
                        margin-bottom: 12px !important; 
                        font-size: 1rem !important;
                    }
                    .resource-card { 
                        background: white !important; 
                        border-radius: 12px !important; 
                        padding: 20px !important; 
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important; 
                        margin-bottom: 16px !important;
                    }
                    .resource-title { 
                        font-weight: 700 !important; 
                        color: #1A365D !important; 
                        margin-bottom: 12px !important; 
                        font-size: 1.1rem !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .resource-title i { 
                        margin-right: 10px !important; 
                        color: #165DFF !important;
                    }
                    .header-blue { 
                        background: linear-gradient(135deg, #1A365D 0%, #2C5282 100%) !important; 
                        padding: 20px 0 !important; 
                        border-radius: 0 0 20px 20px !important; 
                        margin-bottom: 30px !important; 
                        text-align: center !important;
                    }
                    .header-blue h1 { 
                        color: white !important; 
                        font-size: 2rem !important; 
                        font-weight: bold !important; 
                        margin-bottom: 0.5rem !important;
                    }
                    .header-blue p { 
                        color: rgba(255, 255, 255, 0.9) !important;
                    }
                    .handover-info h2 { 
                        color: #1A365D !important; 
                        font-size: 1.25rem !important; 
                        font-weight: bold !important; 
                        display: flex !important; 
                        align-items: center !important;
                    }
                    .section-title-icon { 
                        background: #1A365D !important; 
                        color: white !important; 
                        width: 32px !important; 
                        height: 32px !important; 
                        border-radius: 8px !important; 
                        display: inline-flex !important; 
                        align-items: center !important; 
                        justify-content: center !important; 
                        margin-right: 10px !important;
                    }
                    .handover-item { 
                        display: flex !important; 
                        flex-direction: column !important;
                    }
                    .handover-label { 
                        font-size: 0.9rem !important; 
                        color: #1A365D !important; 
                        margin-bottom: 6px !important; 
                        font-weight: 700 !important;
                    }
                    .handover-value { 
                        background: #F8FAFC !important; 
                        border-radius: 6px !important; 
                        padding: 10px 14px !important; 
                        border: 1px solid #E2E8F0 !important; 
                        font-weight: 600 !important; 
                        min-height: 44px !important;
                    }
                `;
                exportContainer.appendChild(style);
                document.body.appendChild(exportContainer);
                
                // Copy blue header
                const headerBlue = document.querySelector('.header-blue');
                if (headerBlue) {
                    const headerClone = headerBlue.cloneNode(true);
                    exportContainer.appendChild(headerClone);
                }
                
                // Copy handover info section
                const handoverInfo = document.querySelector('.handover-info');
                if (handoverInfo) {
                    const handoverClone = handoverInfo.cloneNode(true);
                    exportContainer.appendChild(handoverClone);
                }
                
                // Copy the entire main content area, preserving layout structure
                const mainContent = document.querySelector('.flex.flex-col.lg\\:flex-row.gap-6');
                if (mainContent) {
                    const mainContentClone = mainContent.cloneNode(true);
                    const elementsToRemove = mainContentClone.querySelectorAll('button, .btn, script, style, .flight-card-footer');
                    elementsToRemove.forEach(el => el.remove());
                    

                    
                    exportContainer.appendChild(mainContentClone);
                } else {
                    // Fallback: copy individual cards
                    const cards = document.querySelectorAll('.card');
                    cards.forEach(card => {
                        exportContainer.appendChild(card.cloneNode(true));
                    });
                }
                
                // 使用html2canvas生成图片
                setTimeout(() => {
                    html2canvas(exportContainer, {
                        scale: 2,
                        useCORS: true,
                        allowTaint: true,
                        backgroundColor: '#ffffff',
                        width: exportContainer.scrollWidth,
                        height: exportContainer.scrollHeight,
                        scrollX: 0,
                        scrollY: 0
                    }).then(canvas => {
                        console.log('图片Canvas生成成功，尺寸:', canvas.width, 'x', canvas.height);
                        
                        // 转换为图片并下载
                        canvas.toBlob(function(blob) {
                            console.log('图片Blob生成成功，大小:', blob.size, 'bytes');
                            console.log('图片MIME类型:', blob.type);
                             // 首先尝试直接下载
                             const fileName = `航班运行交接班全景图_${new Date().toISOString().slice(0, 10)}.png`;
                             
                             // 方法1：使用download属性
                             try {
                                 console.log('开始下载图片，文件名:', fileName);
                                 const url = URL.createObjectURL(blob);
                                 const link = document.createElement('a');
                                 link.href = url;
                                 link.download = fileName;
                                 link.style.display = 'none';
                                 document.body.appendChild(link);
                                 link.click();
                                 document.body.removeChild(link);
                                 URL.revokeObjectURL(url);
                                 
                                 // 清理临时元素
                                 document.body.removeChild(exportContainer);
                                 
                                 // 静默成功，不显示提示
                                 
                                 // 同时在控制台输出信息
                                 console.log('图片导出成功:', {
                                     fileName: fileName,
                                     fileSize: blob.size,
                                     fileSizeKB: (blob.size / 1024).toFixed(1) + ' KB',
                                     mimeType: blob.type,
                                     timestamp: new Date().toLocaleString()
                                 });
                                 
                             } catch (downloadError) {
                                 console.error('自动下载失败:', downloadError);
                                 
                                 // 方法2：在新窗口中显示图片，用户可以右键保存
                                 const url = URL.createObjectURL(blob);
                                 const newWindow = window.open();
                                 newWindow.document.write(`
                                     <html>
                                     <head>
                                         <title>航班运行交接班全景图</title>
                                         <style>
                                             body { margin: 0; padding: 20px; background: #f5f5f5; font-family: Arial, sans-serif; }
                                             .container { max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
                                             h1 { color: #1A365D; text-align: center; margin-bottom: 20px; }
                                             .download-info { background: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 20px; }
                                             .download-info p { margin: 5px 0; }
                                             img { max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; }
                                             .download-btn { 
                                                 display: inline-block; 
                                                 background: #165DFF; 
                                                 color: white; 
                                                 padding: 10px 20px; 
                                                 text-decoration: none; 
                                                 border-radius: 6px; 
                                                 margin: 10px 0;
                                             }
                                         </style>
                                     </head>
                                     <body>
                                         <div class="container">
                                             <h1>航班运行交接班全景图</h1>
                                             <div class="download-info">
                                                 <p><strong>文件名：</strong>${fileName}</p>
                                                 <p><strong>文件大小：</strong>${(blob.size / 1024).toFixed(1)} KB</p>
                                                 <p><strong>生成时间：</strong>${new Date().toLocaleString()}</p>
                                                 <p><strong>保存方法：</strong></p>
                                                 <ol>
                                                     <li>右键点击下方图片</li>
                                                     <li>选择"图片另存为"</li>
                                                     <li>选择保存位置并确认</li>
                                                 </ol>
                                                 <a href="${url}" download="${fileName}" class="download-btn">点击下载图片</a>
                                             </div>
                                             <img src="${url}" alt="航班运行交接班全景图" />
                                         </div>
                                     </body>
                                     </html>
                                 `);
                                 newWindow.document.close();
                                 
                                 // 清理临时元素
                                 document.body.removeChild(exportContainer);
                                 
                                 // 静默处理，不显示提示
                             }
                         }, 'image/png');
                    }).catch(error => {
                        console.error('图片生成失败:', error);
                        
                        // 清理临时元素
                        if (document.body.contains(exportContainer)) {
                            document.body.removeChild(exportContainer);
                        }
                        
                        // 静默失败，不显示提示
                    });
                }, 100);
                
            } catch (error) {
                console.error('图片导出失败:', error);
                // 静默失败，不显示提示
            }
        }
        

    </script>
</body>
</html>